/* ==========================================================================
   SKINSOURCER, PHASE 1
   Shared stylesheet for all pages.

   DESIGN TOKENS
   Values below implement the SkinSourcer Visual Identity, Developer
   Style Guide V1 (July 2026): Libre Caslon Display for headlines,
   Hanken Grotesk for body, IBM Plex Mono for provenance details,
   warm paper palette with a single stamp-red accent. Fonts load from
   Google Fonts via the link tag in each page head. To retheme the
   site, edit this block only.
   ========================================================================== */

:root {
  /* ----- Typography ----- */
  --font-display: "Libre Caslon Display", Georgia, serif;  /* headlines, product names, wordmark. Weight 400 only, never bold, never italic */
  --font-body: "Hanken Grotesk", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Helvetica, Arial, sans-serif;   /* body 400/500/600 */
  --font-mono: "IBM Plex Mono", "SF Mono", Consolas, monospace; /* edition markers, manifests, prices, addresses, stamps */

  --text-hero: clamp(2.4rem, 6.5vw, 4.75rem);  /* H1 76px desktop */
  --text-h1: clamp(2.1rem, 5.5vw, 3.6rem);
  --text-h2: clamp(1.7rem, 4vw, 2.875rem);     /* H2 46px */
  --text-h3: 1.6875rem;                        /* H3 27px */
  --text-body: 1.03125rem;                     /* 16.5px */
  --text-subhead: 1.1875rem;                   /* 19px */
  --text-small: 0.875rem;
  --text-button: 0.78125rem;                   /* 12.5px */
  --text-marker: 0.75rem;                      /* 12px */

  --leading-hero: 1.06;
  --leading-h2: 1.14;
  --leading-h3: 1.3;
  --leading-body: 1.68;
  --leading-subhead: 1.6;

  --tracking-button: 0.18em;
  --tracking-marker: 0.22em;
  --tracking-wordmark: 0.3em;

  /* ----- Color (style guide section 02) ----- */
  --color-bg: #f4efe7;            /* PAPER, page background */
  --color-surface: #eae3d6;       /* IVORY, alt section background */
  --color-ink: #221d17;           /* INK, text and buttons */
  --color-ink-body: #443e36;      /* SOFT INK, long-form body */
  --color-ink-soft: #6e6459;      /* TAUPE, secondary text */
  --color-line: #d9d0c1;          /* HAIRLINE, rules and borders */
  --color-accent: #8f3b2c;        /* STAMP RED, the only accent */
  --color-on-accent: #f4efe7;     /* text on dark or red backgrounds */
  --color-sold-border: #c9bfae;   /* sold-out button border */
  --color-sold-text: #9a9083;     /* sold-out button text */

  /* ----- Spacing and layout ----- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6.5rem;
  --page-max: 74rem;
  --measure: 38rem;
  --radius: 0;                    /* square corners everywhere */
}

/* ==========================================================================
   Base
   ========================================================================== */

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: var(--leading-body);
  color: var(--color-ink-body);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

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

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

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400; /* never bold, never italic */
  color: var(--color-ink);
}

h1 { line-height: var(--leading-hero); }
h2 { line-height: var(--leading-h2); }
h3 { line-height: var(--leading-h3); }

.wrap { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--space-3); }

.measure { max-width: var(--measure); }

/* Edition marker, inline variant (style guide section 04) */
.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-marker);
  letter-spacing: var(--tracking-marker);
  text-transform: uppercase;
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
  padding: 8px 14px;
  border-radius: var(--radius);
}

/* Visible placeholder for content only Lauren can supply */
.todo-placeholder {
  border: 1px dashed var(--color-accent);
  background: var(--color-surface);
  color: var(--color-ink-soft);
  padding: var(--space-3);
  font-size: var(--text-small);
  border-radius: var(--radius);
}

/* ==========================================================================
   Header and navigation
   ========================================================================== */

.site-header {
  border-bottom: 1px solid var(--color-line);
  background: var(--color-bg);
}

.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.3rem;
  letter-spacing: var(--tracking-wordmark);
  text-transform: uppercase;
  color: var(--color-ink);
  text-decoration: none;
}
.wordmark:hover { color: var(--color-ink); }

.site-nav a {
  font-family: var(--font-mono);
  font-size: var(--text-marker);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  text-decoration: none;
  margin-left: var(--space-3);
}
.site-nav a:first-child { margin-left: 0; }
.site-nav a:hover { color: var(--color-accent); }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero { padding: var(--space-6) 0 var(--space-5); }

.hero .wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  align-items: end;
}

@media (min-width: 900px) {
  .hero .wrap { grid-template-columns: 1fr 300px; gap: 6rem; }
}

.hero h1 {
  font-size: var(--text-hero);
  letter-spacing: -0.01em;
  max-width: 15ch;
  text-wrap: balance;
  margin-bottom: var(--space-3);
}

.hero .subhead {
  font-size: var(--text-subhead);
  line-height: var(--leading-subhead);
  color: var(--color-ink-soft);
  max-width: 560px;
  margin-bottom: var(--space-4);
}

.hero .btn .glyph { font-family: var(--font-mono); font-weight: 400; margin-left: 14px; }

/* Import manifest, quiet provenance (design handoff, hero right column) */
.manifest {
  border-top: 1px solid var(--color-ink);
  padding-top: 14px;
}

.manifest-label {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-accent);
  padding-bottom: 12px;
}

.manifest-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 0.65625rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  border-bottom: 1px dotted var(--color-sold-border);
  padding: 8px 0;
}

.manifest-row:last-child { border-bottom: none; }
.manifest-row .val { color: var(--color-ink); }
.manifest-row .val-cleared { color: var(--color-accent); }

/* ==========================================================================
   Buttons (style guide section 03)
   All buttons: Hanken Grotesk 600, 12.5px, uppercase, 0.18em tracking,
   square corners, min touch height 44px, full width on mobile.
   ========================================================================== */

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-button);
  letter-spacing: var(--tracking-button);
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  padding: 19px 36px;
  min-height: 44px;
  border-radius: var(--radius);
  border: 1px solid var(--color-ink);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn-primary { background: var(--color-ink); color: var(--color-on-accent); }
.btn-primary:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }

.btn-secondary { background: transparent; color: var(--color-ink); }
.btn-secondary:hover { color: var(--color-accent); border-color: var(--color-accent); }

@media (max-width: 540px) {
  .btn { display: block; width: 100%; }
}

/* ==========================================================================
   Drop 001 product section
   ========================================================================== */

.drop { padding: var(--space-5) 0; border-top: 1px solid var(--color-line); }

.drop-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  align-items: start;
}

@media (min-width: 760px) {
  .drop-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

.drop-photo-wrap { position: relative; }

.drop-photo {
  background: #ffffff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: var(--space-3);
}

/* Customs stamp, overlaps the plate's top-right corner */
.stamp {
  position: absolute;
  top: -30px;
  right: -18px;
  transform: rotate(8deg);
  opacity: 0.9;
  mix-blend-mode: multiply;
  pointer-events: none;
}

@media (max-width: 540px) {
  .stamp { width: 92px; height: 92px; top: -22px; right: -8px; }
}

.drop-photo img { margin: 0 auto; max-height: 560px; width: auto; }

.drop-photo figcaption {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.71rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  padding-top: var(--space-2);
}

.drop-details .eyebrow { margin-bottom: var(--space-3); }

.product-name { font-size: var(--text-h2); margin-bottom: var(--space-1); }

.price {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 1.1rem;
  letter-spacing: 0.05em;
  color: var(--color-ink);
  margin-bottom: var(--space-3);
}

.drop-headline { font-size: var(--text-h3); margin-bottom: var(--space-2); }

.drop-details p { max-width: var(--measure); margin-bottom: var(--space-3); }

.how-to-use {
  border-left: 2px solid var(--color-line);
  padding-left: var(--space-2);
  font-size: var(--text-small);
  color: var(--color-ink-soft);
}

.buy-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin: var(--space-3) 0 var(--space-2);
}

@media (max-width: 540px) {
  .buy-row { display: block; }
  .buy-row .btn { margin-bottom: var(--space-1); }
}

.scarcity {
  font-family: var(--font-mono);
  font-size: var(--text-marker);
  letter-spacing: 0.05em;
  color: var(--color-accent);
}

/* ----- Sold-out state ---------------------------------------------------
   Toggle by adding class "sold-out" to the <body> tag of index.html:
   <body class="sold-out">
   The Buy button becomes "Drop 001: Sold Out" and the email capture
   section becomes the visually primary call to action.
   ------------------------------------------------------------------------ */

.buy-btn .label-sold { display: none; }

body.sold-out .buy-btn .label-live { display: none; }
body.sold-out .buy-btn .label-sold { display: inline; }

body.sold-out .buy-btn {
  pointer-events: none;
  cursor: not-allowed;
  background: transparent;
  border-color: var(--color-sold-border);
  color: var(--color-sold-text);
}

body.sold-out .scarcity { display: none; }

body.sold-out .email-cta {
  background: var(--color-accent);
}
body.sold-out .email-cta h2,
body.sold-out .email-cta p { color: var(--color-on-accent); }
body.sold-out .email-cta .email-form button {
  background: var(--color-bg);
  color: var(--color-accent);
  border-color: var(--color-bg);
}
body.sold-out .email-cta .email-form input[type="email"] {
  border-bottom-color: var(--color-on-accent);
  color: var(--color-on-accent);
}
body.sold-out .email-cta .cta-eyebrow { color: var(--color-on-accent); }

/* ==========================================================================
   Three pillars
   ========================================================================== */

.pillars { padding: var(--space-5) 0; border-top: 1px solid var(--color-line); }

.pillars-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 760px) {
  .pillars-grid { grid-template-columns: repeat(3, 1fr); }
}

.pillar { border-top: 1px solid var(--color-ink); padding-top: var(--space-2); }

.pillar-index {
  display: block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-marker);
  letter-spacing: var(--tracking-marker);
  color: var(--color-accent);
  margin-bottom: var(--space-2);
}

.pillar h3 { font-size: 1.6rem; margin-bottom: var(--space-1); }
.pillar p { font-size: var(--text-small); color: var(--color-ink-soft); }

/* ==========================================================================
   Email capture
   ========================================================================== */

.email-cta {
  background: var(--color-surface);
  padding: var(--space-5) 0;
  border-top: 1px solid var(--color-line);
}

.email-cta .cta-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-marker);
  letter-spacing: var(--tracking-marker);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-2);
}

.email-cta h2 { font-size: var(--text-h2); margin-bottom: var(--space-2); }
.email-cta p { max-width: var(--measure); margin-bottom: var(--space-3); color: var(--color-ink-soft); }

@media (min-width: 900px) {
  .email-cta .wrap { text-align: center; }
  .email-cta p, .email-cta .email-form { margin-left: auto; margin-right: auto; }
}

.email-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  max-width: 28rem;
}

.email-form input[type="email"] {
  flex: 1 1 14rem;
  font-family: var(--font-mono);
  font-size: var(--text-small);
  padding: 0.85em 0.5em;
  min-height: 44px;
  border: none;
  border-bottom: 1px solid var(--color-ink);
  border-radius: var(--radius);
  background: transparent;
  color: var(--color-ink);
}

.email-form input[type="email"]::placeholder { color: var(--color-sold-text); }

.email-form input[type="email"]:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

.email-form button {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-button);
  letter-spacing: var(--tracking-button);
  text-transform: uppercase;
  padding: 0.85em 1.6em;
  min-height: 44px;
  border: 1px solid var(--color-ink);
  border-radius: var(--radius);
  background: var(--color-ink);
  color: var(--color-on-accent);
  cursor: pointer;
}

.email-form button:hover { background: var(--color-accent); border-color: var(--color-accent); }

/* ==========================================================================
   Inner pages (Source Report, Criteria, Founder)
   ========================================================================== */

.page { padding: var(--space-5) 0 var(--space-6); }

.page-title { font-size: var(--text-h1); max-width: 24ch; margin-bottom: var(--space-4); }

.page section { margin-bottom: var(--space-4); }

.page h2 { font-size: var(--text-h3); margin-bottom: var(--space-1); }

.page p, .page li { max-width: var(--measure); }

.page ol { padding-left: 1.4em; max-width: var(--measure); }
.page ol li { margin-bottom: var(--space-2); }

.report-photo {
  float: none;
  background: #ffffff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: var(--space-2);
  max-width: 16rem;
  margin-bottom: var(--space-4);
}

@media (min-width: 760px) {
  .report-photo { float: right; margin-left: var(--space-4); }
}

.inci {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.7;
  color: var(--color-ink-soft);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: var(--space-3);
  max-width: var(--measure);
}

.key-ingredients {
  max-width: var(--measure);
  margin-bottom: var(--space-3);
}

.inci-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  margin-bottom: var(--space-1);
}

.import-trail {
  list-style: none;
  padding: 0;
  max-width: var(--measure);
}

.import-trail li {
  padding: var(--space-1) 0 var(--space-1) var(--space-3);
  border-left: 1px solid var(--color-line);
  position: relative;
}

.import-trail li::before {
  content: "";
  position: absolute;
  left: -4.5px;
  top: 1.1em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
}

.founder-note {
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--color-ink);
  border-left: 2px solid var(--color-accent);
  padding-left: var(--space-3);
  max-width: var(--measure);
}

/* ==========================================================================
   Founder page
   ========================================================================== */

.founder-banner {
  border-bottom: 1px solid var(--color-line);
}

.founder-banner img {
  width: 100%;
  height: clamp(180px, 32vw, 340px);
  object-fit: cover;
  display: block;
}

.founder-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  align-items: start;
}

@media (min-width: 760px) {
  .founder-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
}

.founder-photo {
  background: #ffffff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: var(--space-2);
  max-width: 22rem;
}

.founder-photo figcaption {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.71rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  padding-top: var(--space-2);
}

.founder-bio p { margin-bottom: var(--space-3); }

/* ==========================================================================
   Footer (global, on every page)
   ========================================================================== */

.site-footer {
  border-top: 1px solid var(--color-line);
  background: var(--color-bg);
  padding: var(--space-5) 0 var(--space-4);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

@media (min-width: 760px) {
  .footer-grid { grid-template-columns: 3fr 2fr; }
}

.footer-signup p {
  font-size: var(--text-small);
  color: var(--color-ink-soft);
  margin-bottom: var(--space-2);
}

.footer-social { font-size: var(--text-small); }
.footer-social a {
  display: inline-block;
  margin-right: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-marker);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.routing-line {
  font-family: var(--font-mono);
  font-size: 0.65625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-sold-text);
  margin-bottom: var(--space-3);
}

.footer-legal {
  border-top: 1px solid var(--color-line);
  padding-top: var(--space-3);
  font-size: var(--text-small);
  color: var(--color-ink-soft);
}

.footer-legal .disclaimer { margin-top: var(--space-1); max-width: 60rem; }