:root {
  --cream: #fff7ed;
  --ink: #1f1a17;
  --warm: #b87457;
  --warm-dark: #8f4f38;
  --card: rgba(255, 248, 239, 0.93);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  min-height: 100svh;
  background: #1a1714;
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button, a { -webkit-tap-highlight-color: transparent; }

.page-shell {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
}

.background {
  position: absolute;
  inset: 0;
  z-index: -3;
  background-image: url("assets/madison-clover-background.webp");
  background-size: cover;
  background-position: 46% center;
  filter: saturate(1.02) contrast(1.01);
  transform: scale(1.01);
}

.shade {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(17,12,8,0.03) 0%, rgba(17,12,8,0.03) 38%, rgba(17,12,8,0.26) 66%, rgba(17,12,8,0.48) 100%),
    linear-gradient(180deg, rgba(15,10,7,0.05) 0%, rgba(15,10,7,0.00) 50%, rgba(15,10,7,0.18) 100%);
}

.content {
  width: min(51vw, 590px);
  margin-left: auto;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: max(28px, env(safe-area-inset-top)) clamp(22px, 4vw, 58px) max(30px, env(safe-area-inset-bottom)) 8px;
}

.wordmark {
  margin: 0 0 clamp(24px, 4vh, 46px);
  color: #ffe7c6;
  font-family: "Snell Roundhand", "Segoe Script", "Brush Script MT", cursive;
  font-size: clamp(64px, 8.5vw, 126px);
  line-height: 0.72;
  font-weight: 400;
  letter-spacing: -0.035em;
  text-align: center;
  text-shadow: 0 4px 22px rgba(0,0,0,.32);
  transform: rotate(-2deg);
}
.wordmark .clover-line { display: inline-block; margin-left: 1.4em; }

.links {
  display: grid;
  gap: 18px;
  width: 100%;
  margin-left: auto;
}

.social-card {
  width: 100%;
  min-height: 112px;
  display: grid;
  grid-template-columns: 78px 1fr 32px;
  align-items: center;
  gap: 18px;
  padding: 15px 22px;
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: 0 14px 38px rgba(30,18,10,.20), inset 0 1px rgba(255,255,255,.45);
  text-decoration: none;
  color: #161411;
  cursor: pointer;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.social-card:hover { transform: translateY(-2px); box-shadow: 0 18px 44px rgba(30,18,10,.25); }
.social-card:active { transform: scale(.985); }
.social-card:focus-visible { outline: 3px solid #fff4df; outline-offset: 3px; }

.instagram {
  color: white;
  background: linear-gradient(105deg, rgba(173,43,186,.92), rgba(225,62,100,.93) 54%, rgba(255,145,73,.95));
}
.twitter {
  color: white;
  background: linear-gradient(105deg, rgba(10,10,10,.95), rgba(34,33,30,.95));
}
.patreon {
  appearance: none;
  font: inherit;
  text-align: left;
  color: white;
  background: linear-gradient(105deg, rgba(183,106,75,.95), rgba(204,139,106,.94));
}

.icon-box {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  background: rgba(255,255,255,.08);
}
.icon-box svg { width: 50px; height: 50px; }
.x-icon svg { width: 48px; height: 48px; }
.lock-icon { background: rgba(255,255,255,.10); }
.lock-icon svg { width: 44px; height: 44px; }

.link-copy { min-width: 0; }
.link-copy strong {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 500;
  line-height: 1.02;
}
.link-copy small {
  display: block;
  margin-top: 5px;
  font-size: clamp(16px, 2vw, 24px);
  opacity: .9;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.arrow {
  justify-self: end;
  font-size: 54px;
  font-weight: 200;
  line-height: 1;
  margin-top: -4px;
}

.age-gate {
  border: 0;
  padding: 0;
  background: transparent;
  width: min(92vw, 480px);
  max-width: 480px;
  overflow: visible;
}
.age-gate::backdrop {
  background: rgba(12, 9, 7, .74);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.age-card {
  position: relative;
  margin: 0;
  border-radius: 30px;
  padding: 34px 28px 28px;
  text-align: center;
  color: #2b201a;
  background: linear-gradient(180deg, #fffaf3, #f5e9dc);
  border: 1px solid rgba(255,255,255,.85);
  box-shadow: 0 30px 80px rgba(0,0,0,.34);
}
.close-button {
  position: absolute;
  top: 12px;
  right: 15px;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  font-size: 30px;
  line-height: 1;
  color: #6e5b50;
  cursor: pointer;
}
.age-badge {
  width: 82px;
  height: 82px;
  margin: 0 auto 14px;
  display: grid;
  place-items: center;
  border: 4px solid var(--warm-dark);
  border-radius: 50%;
  color: var(--warm-dark);
  font-size: 31px;
  font-weight: 800;
}
.age-card h2 {
  margin: 8px 0 10px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 34px;
  font-weight: 600;
}
.age-card p {
  margin: 0 auto 10px;
  max-width: 360px;
  color: #4b3c33;
  font-size: 17px;
  line-height: 1.5;
}
.age-card .question { margin-top: 12px; font-weight: 700; }
.age-actions { display: grid; gap: 11px; margin-top: 22px; }
.age-actions button {
  min-height: 54px;
  border-radius: 16px;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
}
.continue-button {
  border: 0;
  color: white;
  background: linear-gradient(180deg, #a64f39, #813322);
  box-shadow: 0 8px 20px rgba(129,51,34,.25);
}
.cancel-button {
  color: #4f3a30;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(89,63,49,.30);
}

@media (max-width: 760px) {
  .background {
    background-position: 44% center;
  }
  .shade {
    background:
      linear-gradient(90deg, rgba(17,12,8,0.01) 0%, rgba(17,12,8,0.02) 43%, rgba(17,12,8,0.34) 73%, rgba(17,12,8,0.55) 100%),
      linear-gradient(180deg, rgba(15,10,7,0.04), rgba(15,10,7,.02) 60%, rgba(15,10,7,.18));
  }
  .content {
    width: 58%;
    padding: max(20px, env(safe-area-inset-top)) 14px max(22px, env(safe-area-inset-bottom)) 4px;
  }
  .wordmark {
    font-size: clamp(48px, 11vw, 74px);
    margin-bottom: 26px;
    line-height: .76;
  }
  .wordmark .clover-line { margin-left: .85em; }
  .links { gap: 11px; }
  .social-card {
    min-height: 84px;
    grid-template-columns: 52px 1fr 20px;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 20px;
  }
  .icon-box { width: 50px; height: 50px; border-radius: 15px; }
  .icon-box svg { width: 38px; height: 38px; }
  .x-icon svg { width: 36px; height: 36px; }
  .lock-icon svg { width: 34px; height: 34px; }
  .link-copy strong { font-size: clamp(18px, 4.5vw, 25px); }
  .link-copy small { font-size: clamp(11px, 3.15vw, 17px); }
  .arrow { font-size: 38px; }
}

@media (max-width: 480px) {
  .content {
    width: 61%;
    padding-right: 10px;
  }
  .wordmark {
    font-size: clamp(44px, 13vw, 64px);
    margin-bottom: 20px;
  }
  .social-card {
    grid-template-columns: 45px 1fr 16px;
    min-height: 76px;
    gap: 8px;
    padding: 9px 10px;
    border-radius: 18px;
  }
  .icon-box { width: 44px; height: 44px; border-radius: 13px; }
  .icon-box svg { width: 32px; height: 32px; }
  .link-copy strong { font-size: clamp(16px, 4.8vw, 22px); }
  .link-copy small { font-size: clamp(10px, 3.1vw, 14px); }
  .arrow { font-size: 34px; }
}

@media (orientation: landscape) and (max-height: 600px) {
  .content { justify-content: center; padding-top: 14px; padding-bottom: 14px; }
  .wordmark { font-size: clamp(42px, 8vh, 70px); margin-bottom: 16px; }
  .links { gap: 8px; }
  .social-card { min-height: 68px; }
}

@media (prefers-reduced-motion: reduce) {
  .social-card { transition: none; }
}

/* Freshly rebuilt package: 2026-10-07 */

/* Desktop and tablet: keep the complete portrait legible at wide aspect ratios.
   Mobile styles above remain unchanged. */
@media (min-width: 761px) {
  .page-shell {
    background: #31231c;
  }
  /* Blurred ambient extension fills the right half without stretching Clover. */
  .page-shell::before {
    content: "";
    position: absolute;
    inset: -80px;
    z-index: -4;
    background: url("assets/madison-clover-background.webp") center / cover no-repeat;
    filter: blur(64px) saturate(1.15) brightness(.57);
    transform: scale(1.05);
    pointer-events: none;
  }
  .background {
    inset: 0 auto 0 0;
    width: min(64vw, 80svh);
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: left center;
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 66%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 0%, #000 66%, transparent 100%);
  }
  .shade {
    background:
      linear-gradient(90deg, transparent 0%, rgba(21, 14, 9, .03) 33%, rgba(26, 18, 14, .44) 53%, rgba(28, 19, 15, .77) 69%, rgba(28, 19, 15, .79) 100%),
      linear-gradient(180deg, rgba(10, 8, 6, .08) 0%, transparent 24%, transparent 76%, rgba(10, 8, 6, .16) 100%);
  }
  .content {
    width: min(51%, 880px);
    margin-left: auto;
    padding: 48px clamp(38px, 5.6vw, 100px) 48px clamp(24px, 3vw, 50px);
    justify-content: center;
  }
  .wordmark {
    font-size: clamp(60px, 6.7vw, 106px);
    line-height: .78;
    margin-bottom: clamp(28px, 4vh, 46px);
  }
  .wordmark .clover-line { margin-left: .95em; }
  .links {
    max-width: 520px;
    gap: 14px;
    margin-inline: auto;
  }
  .social-card {
    min-height: 95px;
    grid-template-columns: 60px minmax(0, 1fr) 25px;
    gap: 14px;
    padding: 12px 18px;
    border-radius: 23px;
  }
  .icon-box { width: 58px; height: 58px; border-radius: 17px; }
  .icon-box svg { width: 43px; height: 43px; }
  .x-icon svg { width: 40px; height: 40px; }
  .lock-icon svg { width: 39px; height: 39px; }
  .link-copy strong { font-size: clamp(23px, 2.2vw, 31px); }
  .link-copy small { font-size: clamp(14px, 1.4vw, 19px); }
  .arrow { font-size: 43px; }
}
@media (min-width: 761px) and (max-width: 1050px) {
  .background { width: min(67vw, 80svh); }
  .content { width: 55%; padding: 36px 26px 36px 18px; }
  .wordmark { font-size: clamp(54px, 7vw, 73px); }
  .social-card {
    min-height: 82px;
    grid-template-columns: 49px minmax(0, 1fr) 18px;
    gap: 11px;
    padding: 10px 12px;
  }
  .icon-box { width: 48px; height: 48px; border-radius: 14px; }
  .icon-box svg { width: 36px; height: 36px; }
  .link-copy strong { font-size: clamp(19px, 2.5vw, 25px); }
  .link-copy small { font-size: clamp(13px, 1.6vw, 17px); }
  .arrow { font-size: 34px; }
}
@media (min-width: 761px) and (max-height: 650px) {
  .content { padding-top: 16px; padding-bottom: 16px; }
  .wordmark { font-size: clamp(48px, 10vh, 68px); margin-bottom: 20px; }
  .links { gap: 10px; }
  .social-card { min-height: 70px; }
}


/* Original Madison Clover calligraphy for desktop browsers. Using the art
   itself avoids OS-dependent cursive fallbacks (Georgia / Times on Linux). */
.wordmark-text { display: contents; }
.signature-wordmark { display: none; }
@media (min-width: 761px) {
  .wordmark {
    display: flex;
    align-items: center;
    justify-content: center;
    transform: none;
    margin-bottom: clamp(12px, 2.3vh, 26px);
    line-height: 1;
    letter-spacing: normal;
  }
  .wordmark-text {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .signature-wordmark {
    display: block;
    width: min(100%, 415px);
    height: auto;
    max-height: 40svh;
    object-fit: contain;
    filter: drop-shadow(0 4px 16px rgba(0, 0, 0, .3));
  }
}
@media (min-width: 761px) and (max-width: 1050px) {
  .signature-wordmark { max-width: 340px; max-height: 37svh; }
}
@media (min-width: 761px) and (max-height: 650px) {
  .signature-wordmark { max-width: 300px; max-height: 34svh; }
}