/* ==========================================================================
   DripRead — landing page styles
   Extracted from the Lovable prototype and rewritten as plain CSS.
   Design tokens are the exact oklch() values from the original, with hex
   fallbacks for browsers without oklch support.
   ========================================================================== */

:root {
  /* Palette */
  --cream:   #f8f1e2;
  --ink:     #33261a;
  --orange:  #e2542c;
  --lime:    #c9ec2e;

  /* Ink tints (the original used alpha on the ink colour) */
  --ink-75:  rgba(51, 38, 26, 0.75);
  --ink-70:  rgba(51, 38, 26, 0.70);
  --ink-45:  rgba(51, 38, 26, 0.45);
  --ink-15:  rgba(51, 38, 26, 0.15);

  --radius:  6px;

  --column-width:  768px;
  --column-gutter: 64px;

  /* Content column horizontal placement.
     The original prototype pins the column to the LEFT edge of the viewport
     rather than centring it, which leaves a lot of empty space on wide
     screens. That behaviour is reproduced here.
     To centre the column instead, change this to `auto`. */
  --column-offset: var(--column-gutter);
}

@supports (color: oklch(0.5 0.1 100)) {
  :root {
    --cream:  oklch(0.965 0.028 90);
    --ink:    oklch(0.21 0.035 50);
    --orange: oklch(0.64 0.2 35);
    --lime:   oklch(0.84 0.22 125);

    --ink-75: oklch(0.21 0.035 50 / 0.75);
    --ink-70: oklch(0.21 0.035 50 / 0.70);
    --ink-45: oklch(0.21 0.035 50 / 0.45);
    --ink-15: oklch(0.21 0.035 50 / 0.15);
  }
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-optical-sizing: auto;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: inherit; }

/* Hand-drawn strokes sit in an overflowing absolute layer above their text. */
.scribble {
  position: absolute;
  overflow: visible;
  pointer-events: none;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
   Masthead — spans the full viewport, unlike the content column
   -------------------------------------------------------------------------- */

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 12px var(--column-gutter);
}

.wordmark {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 28px;
  margin: 0;
}

.wordmark em {
  font-style: italic;
  font-weight: 600;
}

.pill {
  flex: none;
  background: var(--lime);
  color: var(--ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 10.4px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--radius);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Content column
   -------------------------------------------------------------------------- */

.page {
  width: 100%;
  max-width: var(--column-width);
  margin-left: var(--column-offset);
  margin-right: 0;
  padding: 0 0 64px;
}

/* --------------------------------------------------------------------------
   Headline
   -------------------------------------------------------------------------- */

.headline {
  font-size: 36px;
  font-weight: 400;
  font-style: italic;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 8px 0 22px;
}

.headline .accent {
  position: relative;
  display: inline-block;
  padding-bottom: 20px;   /* makes room for the underline to sit below the text */
  color: var(--orange);
}

.headline .accent .scribble {
  left: -3%;
  bottom: 4px;
  width: 106%;
  height: 20px;
  stroke: var(--orange);
  stroke-width: 2.4;
}

/* --------------------------------------------------------------------------
   Lead paragraph + heart
   -------------------------------------------------------------------------- */

.lead-block {
  position: relative;
  margin-bottom: 20px;
}

.lead {
  font-size: 18px;
  line-height: 1.45;
  color: var(--ink-75);
  margin: 0;
  max-width: 34ch;
}

.heart {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 64px;
  height: 64px;
  overflow: visible;
  pointer-events: none;
  fill: none;
  stroke: var(--orange);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
   The three differences
   -------------------------------------------------------------------------- */

.differences {
  display: flow-root;
  margin-bottom: 26px;
}

.differences-intro {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 14px;
}

.hero-figure {
  float: right;
  width: 256px;
  margin: 0 0 18px 28px;
}

.hero-figure img {
  width: 100%;
  height: 310px;
  object-fit: cover;
  border: 2px solid var(--ink-15);
  border-radius: var(--radius);
  background: var(--ink-15);
}

.difference-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.difference-list li {
  position: relative;
  padding-left: 44px;
  margin-bottom: 18px;
  font-size: 16px;
  line-height: 1.5;
}

.difference-list li:last-child { margin-bottom: 0; }

.marker {
  position: absolute;
  left: 0;
  top: 0;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
}

.marker svg {
  position: absolute;
  inset: 0;
  width: 34px;
  height: 34px;
  overflow: visible;
  fill: none;
  stroke: var(--orange);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.marker span {
  position: relative;
  font-size: 13px;
  font-weight: 600;
  color: var(--orange);
  line-height: 1;
}

/* --------------------------------------------------------------------------
   Counter line — "20" struck to "19" struck to "18"
   -------------------------------------------------------------------------- */

.counter-wrap { margin: 46px 0 0; }

.counter-line {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.45;
  background: var(--lime);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 2px 4px;
}

.tally {
  position: relative;
  display: inline-block;
  width: 22px;
  margin-right: 5px;
  vertical-align: baseline;
}

.tally .struck {
  position: relative;
  display: inline-block;
}

.tally .struck .scribble {
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 8px;
  stroke: var(--ink-70);
  stroke-width: 1.8;
}

/* The superseded numbers stack above the current one, sharing a bottom edge
   so they read as successive handwritten corrections. */
.tally .tier {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 24px;
  line-height: 1;
  white-space: nowrap;
}

.tally .tier-2 {          /* 19 */
  font-size: 24px;
  color: var(--ink-70);
}

.tally .tier-3 {          /* 18 — the live number */
  bottom: 46px;
  font-size: 36px;
  color: var(--orange);
}

.genres {
  font-size: 13px;
  color: var(--ink-70);
  margin: 14px 0 0;
}

/* --------------------------------------------------------------------------
   Closing section
   -------------------------------------------------------------------------- */

.closing {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: start;
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--ink-15);
}

.closing-copy {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-75);
  margin: 0;
}

.underlined {
  position: relative;
  display: inline-block;
}

.underlined .scribble {
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 8px;
  stroke: var(--orange);
  stroke-width: 1.8;
}

.apply-card {
  background: var(--orange);
  color: var(--cream);
  border-radius: var(--radius);
  padding: 18px 20px;
}

.apply-card h2 {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 8px;
}

.apply-card h2 a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

.apply-card h2 a:hover { opacity: 0.85; }

.apply-card p {
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(248, 241, 226, 0.85);
  margin: 0;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer { margin-top: 34px; }

.site-footer a,
.backlink {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-45);
  text-decoration: none;
}

.site-footer a:hover,
.backlink:hover { color: var(--ink); }

/* --------------------------------------------------------------------------
   Terms page
   -------------------------------------------------------------------------- */

.legal { max-width: 68ch; }

.legal h1 {
  font-size: 34px;
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 18px 0 6px;
}

.legal .updated {
  font-size: 13px;
  color: var(--ink-45);
  margin: 0 0 26px;
}

.legal h2 {
  font-size: 20px;
  font-weight: 600;
  margin: 32px 0 10px;
}

.legal h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 22px 0 8px;
}

.legal p,
.legal li {
  font-size: 15px;
  line-height: 1.62;
  color: var(--ink-75);
}

.legal p { margin: 0 0 14px; }

.legal ul {
  margin: 0 0 14px;
  padding-left: 20px;
}

.legal li { margin-bottom: 8px; }

.legal a { color: var(--orange); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  :root { --column-gutter: 20px; }

  .masthead { flex-wrap: wrap; gap: 12px; }

  .headline { font-size: 28px; }

  .lead { font-size: 16px; max-width: none; }

  .heart { display: none; }

  .hero-figure {
    float: none;
    width: 100%;
    margin: 0 0 20px;
  }

  .hero-figure img { height: 240px; }

  .closing { grid-template-columns: 1fr; }
}