/* Shower Thought Studio — one-page company site.
   Same design tokens as website/ (MyTaste's "Refined Warm" system); trimmed to
   what this page uses. Mobile first; no JavaScript anywhere on the site. */

:root {
  --cream: #FFF9F2;
  --ink: #33241F;
  --ink-soft: #7E6A5C;     /* 4.89:1 on cream */
  --ember: #D8452A;        /* button fill; white text passes AA at 19px bold (large text) */
  --coral: #FF6B4A;        /* decoration only, never text */
  --coral-text: #C93A20;   /* 4.89:1 on cream */
  --hairline: #F0E2D6;
  --tile: #FFF6E3;
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --gutter: 20px;
  --radius: 18px;
}

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

html {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-size: 1.0625rem;   /* 17px body */
  line-height: 1.6;
}

img, svg { display: block; max-width: 100%; }

a {
  color: var(--coral-text);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.15em;
}
a:hover { color: var(--ink); }
a:focus-visible {
  outline: 3px solid var(--ember);
  outline-offset: 3px;
  border-radius: 6px;
}

.wrap {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

main { flex: 1 0 auto; padding: 48px 0 40px; }

/* ---------- Studio ---------- */

.studio-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2rem, 8.5vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  max-width: 11ch;
}
.tagline {
  font-size: 1.1875rem;
  color: var(--ink-soft);
  margin: 0 0 28px;
}
.intro {
  margin: 0 0 32px;
  max-width: 34rem;
}

/* ---------- Product card ---------- */

.product {
  border: 1px solid var(--hairline);
  background: var(--tile);
  border-radius: var(--radius);
  padding: 22px 20px;
  margin: 0 0 32px;
}
.product .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
}
.product .mark { width: 40px; height: 40px; }
.wordmark {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.75rem;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--ink);
}
.wordmark .taste { color: var(--coral-text); }
.product .status { margin: 0 0 18px; color: var(--ink-soft); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 14px 24px;
  border-radius: 999px;
  background: var(--ember);
  color: #FFFFFF;
  font-family: var(--ui);
  font-weight: 700;
  font-size: 1.1875rem;   /* 19px bold = WCAG large text; white on ember is 4.37:1 */
  line-height: 1.2;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(216, 69, 42, 0.22);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.btn:hover { color: #FFFFFF; transform: translateY(-1px); box-shadow: 0 8px 22px rgba(216, 69, 42, 0.28); }
.btn:active { transform: translateY(0); }
.btn svg { width: 22px; height: 22px; flex-shrink: 0; }

/* ---------- Contact + footer ---------- */

.contact { margin: 0; font-size: 1.0625rem; }
.contact a { font-weight: 600; word-break: break-word; }

.site-footer {
  border-top: 1px solid var(--hairline);
  padding: 24px 0 40px;
  color: var(--ink-soft);
  font-size: 1rem;
}
.site-footer p { margin: 0; }

/* ---------- 404 ---------- */

.lost h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2rem, 8vw, 2.75rem);
  line-height: 1.1;
  margin: 0 0 12px;
}
.lost p { margin: 0 0 24px; color: var(--ink-soft); max-width: 32rem; }

@media (min-width: 640px) {
  :root { --gutter: 32px; }
  main { padding: 80px 0 56px; }
  .product { padding: 28px 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn:hover { transform: none; }
}

@media print {
  html, body { background: #fff; color: #000; }
  a { color: #000; }
  .btn { box-shadow: none; }
}