.lenormand-page {
  --len-ink: #181a17;
  --len-paper: #d7d7c5;
  --len-pale: #e7e4d5;
  --len-green: #899178;
  --len-sage: #bcc5a4;
  --len-violet: #77758b;
  --len-rust: #a9654c;
  background: #0d0f0e;
}

.lenormand-hero {
  min-height: min(860px, calc(100vh - 76px));
  padding: 8vw 7vw;
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  align-items: center;
  gap: 8vw;
  overflow: hidden;
  position: relative;
  color: #eeede1;
  background:
    radial-gradient(circle at 72% 22%, rgba(191,199,164,.17), transparent 18%),
    linear-gradient(128deg, #0c0e0d 0 45%, #242824 45.2% 70%, #121411 70.2%);
}
.lenormand-hero:before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .22;
  pointer-events: none;
  background: repeating-linear-gradient(97deg, transparent 0 5px, rgba(255,255,255,.025) 6px 7px);
}
.lenormand-hero-copy { position: relative; z-index: 2; }
.lenormand-hero .eyebrow { color: var(--len-sage); }
.lenormand-hero h1 {
  max-width: none;
  font-size: clamp(62px, 7.4vw, 116px);
  line-height: .87;
  color: #f0efe4;
}
.lenormand-hero .hero-copy { color: rgba(238,237,225,.72); }
.lenormand-hero .primary-link { border-color: rgba(238,237,225,.72); }
.lenormand-hero-cards {
  min-height: 610px;
  position: relative;
  z-index: 1;
}
.hero-card {
  width: min(29vw, 320px);
  margin: 0;
  position: absolute;
  overflow: hidden;
  border-radius: 9px;
  box-shadow: -26px 36px 30px rgba(0,0,0,.52);
  background: #292c28;
}
.hero-card img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.hero-card-one { left: 6%; top: 1%; transform: rotate(-7deg); }
.hero-card-two { right: 3%; top: 15%; transform: rotate(8deg); }
.lenormand-hero-cards > p {
  position: absolute;
  right: 0;
  bottom: 2%;
  margin: 0;
  color: rgba(235,235,220,.52);
  font-size: 9px;
  line-height: 1.8;
  text-transform: uppercase;
  letter-spacing: .2em;
  text-align: right;
}

.lenormand-origin {
  padding: 120px 7vw 130px;
  display: grid;
  grid-template-columns: minmax(280px,.8fr) minmax(420px,1.2fr);
  gap: 9vw;
  align-items: start;
  color: var(--len-ink);
  background:
    linear-gradient(108deg, rgba(119,117,139,.12), transparent 42%),
    #d4d5c9;
}
.origin-heading {
  position: sticky;
  top: 120px;
}
.origin-heading h2 {
  margin: 0;
  font-size: clamp(54px,6vw,88px);
  line-height: .94;
  letter-spacing: -.035em;
}
.origin-date {
  margin: 34px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(24,26,23,.22);
  text-transform: uppercase;
  letter-spacing: .17em;
  font-size: 9px;
}
.origin-copy {
  padding-top: 5px;
  border-top: 8px solid var(--len-violet);
}
.origin-copy p {
  margin: 0;
  padding: 27px 0;
  border-bottom: 1px solid rgba(24,26,23,.18);
  font-size: clamp(16px,1.45vw,20px);
  line-height: 1.8;
}
.origin-copy p:first-child::first-letter {
  float: left;
  margin: 8px 12px 0 0;
  color: #6e6c7f;
  font-family: "Italiana",serif;
  font-size: 66px;
  line-height: .75;
}

.lenormand-reader {
  padding: 120px 6vw 140px;
  background:
    radial-gradient(circle at 14% 8%, rgba(120,117,139,.25), transparent 21%),
    linear-gradient(118deg, #d9d8ca 0 62%, #bec4b8 62.2%);
}
.lenormand-reader:before {
  content: "";
  display: block;
  width: 54px;
  height: 8px;
  margin-bottom: 52px;
  background: linear-gradient(90deg, var(--len-violet) 0 62%, var(--len-sage) 62%);
}
.lenormand-modes {
  display: flex;
  gap: 45px;
  margin: 44px 0 35px;
  border-bottom: 1px solid rgba(24,26,23,.24);
  overflow-x: auto;
}
.lenormand-modes button {
  flex: 0 0 auto;
  padding: 0 0 18px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--len-ink);
  opacity: .43;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: .11em;
  font-size: 11px;
}
.lenormand-modes button span { margin-right: 10px; font-family: "Italiana",serif; font-size: 25px; }
.lenormand-modes button.active { opacity: 1; color: #4d554c; border-color: #4d554c; }
.lenormand-setup {
  min-height: 410px;
  padding: 58px;
  display: grid;
  grid-template-columns: minmax(180px,.55fr) minmax(300px,1fr);
  gap: 7vw;
  align-items: center;
  border: 1px solid rgba(24,26,23,.16);
  background: rgba(237,235,220,.42);
  box-shadow: 24px 28px 0 rgba(72,78,70,.09);
}
.lenormand-back {
  width: min(240px,100%);
  aspect-ratio: 560/980;
  margin: auto;
  border-radius: 9px;
  background: #272a26 url("/images/lenormand-back.webp") center/cover no-repeat;
  box-shadow: -14px 23px 25px rgba(20,22,20,.27);
}
.lenormand-setup h3 { margin: 0 0 20px; font-size: clamp(38px,4vw,57px); }
.lenormand-setup p:not(.eyebrow) { max-width: 620px; line-height: 1.75; }
.lenormand-control { max-width: 520px; margin-top: 25px; }
.lenormand-control label,
.tableau-option label {
  display: block;
  margin-bottom: 7px;
  text-transform: uppercase;
  letter-spacing: .13em;
  font-size: 9px;
  font-weight: 600;
}
.lenormand-control .primary-button { margin-top: 22px; }

.len-card-detail {
  display: grid;
  grid-template-columns: minmax(220px,330px) minmax(300px,650px);
  justify-content: center;
  gap: 6vw;
  padding: 70px 0 30px;
}
.len-card-art {
  width: 100%;
  max-width: 330px;
  border-radius: 9px;
  overflow: hidden;
  box-shadow: -15px 25px 26px rgba(20,22,20,.25);
  align-self: start;
}
.len-card-art img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.len-card-copy { align-self: center; }
.len-card-copy .eyebrow { margin-bottom: 9px; }
.len-card-copy h3 { margin: 0; font-size: clamp(44px,5vw,72px); line-height: 1; }
.french-name { margin: 8px 0 32px; font-family: "Italiana",serif; font-size: 23px; color: #6e6c7f; }
.quatrain-label,
.translation-label {
  margin: 0 0 9px;
  color: #735f78;
  font-family: "DM Sans",sans-serif;
  font-size: 8px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .16em;
}
.translation-label { margin-top: 22px; }
.quatrain {
  margin: 0 0 22px;
  padding: 24px 0 24px 28px;
  border-left: 2px solid var(--len-violet);
  font-family: "Italiana",serif;
  font-size: 24px;
  line-height: 1.55;
  white-space: pre-line;
}
.literal { margin: 0 0 26px; font-size: 13px; line-height: 1.75; font-style: italic; }
.reader-note { font-size: 15px; line-height: 1.8; }
.len-invitation { margin-top: 25px; font-family: "Italiana",serif; font-size: 21px; }
.editorial-note { margin-top: 23px; padding-top: 18px; border-top: 1px solid rgba(24,26,23,.18); font-size: 11px; line-height: 1.65; opacity: .72; }

.three-line { padding: 65px 0 20px; }
.three-line-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 30px;
  align-items: start;
}
.line-card { min-width: 0; }
.line-card:nth-child(2) { transform: translateY(30px); }
.line-card-art {
  width: min(100%,290px);
  aspect-ratio: 4 / 7;
  margin: auto;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: -11px 18px 20px rgba(20,22,20,.2);
}
.line-card-art img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 7;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}
.line-card .position-label { margin-top: 20px; }
.line-card h3 { margin: 7px 0; text-align: center; font-size: 28px; }
.line-quatrain-block {
  max-width: 320px;
  margin: 20px auto 0;
  padding-top: 18px;
  border-top: 1px solid rgba(24,26,23,.17);
  text-align: left;
}
.line-quatrain {
  margin: 0;
  font-family: "Italiana",serif;
  font-size: 16px;
  line-height: 1.55;
  white-space: pre-line;
}
.line-translation { margin: 0; font-size: 12px; line-height: 1.65; font-style: italic; }
.line-meaning { margin: 20px auto 0; max-width: 320px; font-size: 13px; line-height: 1.7; text-align: center; }
.line-card-invitation {
  max-width: 310px;
  margin: 18px auto 0;
  padding: 15px 12px 0;
  border-top: 1px solid rgba(24,26,23,.17);
  font-family: "Italiana",serif;
  font-size: 17px;
  line-height: 1.45;
  text-align: center;
}
.line-reading {
  max-width: 900px;
  margin: 100px auto 0;
  padding: 42px 48px;
  border-left: 9px solid var(--len-violet);
  background: rgba(231,229,214,.72);
}
.line-reading h3 { margin: 0 0 20px; font-size: 40px; }
.line-reading p { line-height: 1.8; }
.line-reading p strong { font-weight: 600; }
.line-oracle {
  margin: 0 0 28px;
  padding: 0 0 28px;
  border-bottom: 1px solid rgba(24,26,23,.18);
  font-family: "Italiana",serif;
  font-size: clamp(23px,2.5vw,34px);
  line-height: 1.45 !important;
}
.line-question {
  margin: 30px 0 0;
  padding: 22px 25px;
  background: rgba(111,108,127,.1);
  font-family: "Italiana",serif;
  font-size: 21px;
  line-height: 1.5 !important;
}
.line-question span {
  display: block;
  margin-bottom: 8px;
  color: #735f78;
  font-family: "DM Sans",sans-serif;
  font-size: 8px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .16em;
}
.condition-list { margin: 23px 0 0; padding: 20px 0 0; border-top: 1px solid rgba(24,26,23,.17); list-style: none; }
.condition-list li { margin: 10px 0; font-size: 13px; line-height: 1.65; }
.condition-list li:before { content: "↔"; margin-right: 12px; color: #6e6c7f; }
.len-reading-actions { display: flex; justify-content: center; gap: 24px; margin-top: 42px; }

.tableau-intro {
  padding: 38px 0 28px;
  display: flex;
  justify-content: space-between;
  gap: 35px;
  align-items: end;
}
.tableau-intro > div:first-child { max-width: 660px; }
.tableau-intro h3 { margin: 0 0 14px; font-size: 46px; }
.tableau-intro p { line-height: 1.7; }
.tableau-option { min-width: 250px; }
.tableau-option .primary-button { width: 100%; }
.grand-tableau-wrap {
  margin: 30px calc(50% - 50vw) 0;
  padding: 55px max(2vw,20px) 65px;
  overflow-x: auto;
  color: #e7e6d9;
  background:
    radial-gradient(circle at 78% 13%, rgba(199,207,172,.14), transparent 18%),
    #141714;
}
.grand-tableau {
  width: max-content;
  min-width: max-content;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(8, 132px);
  gap: 12px;
}
.tableau-card {
  width: 132px;
  min-width: 132px;
  padding: 0 0 10px;
  border: 1px solid rgba(231,230,217,.15);
  background: rgba(255,255,255,.025);
  color: #e7e6d9;
  cursor: pointer;
  text-align: left;
}
.tableau-card:nth-child(33) { grid-column: 3; }
.tableau-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 7;
  object-fit: cover;
  border-radius: 5px;
  opacity: .88;
}
.tableau-card span { display: block; padding: 8px 8px 0; font-size: 9px; line-height: 1.4; }
.tableau-card small { display: block; padding: 3px 8px 0; color: rgba(231,230,217,.52); font-size: 8px; line-height: 1.4; }
.tableau-card:hover,
.tableau-card.selected { border-color: var(--len-sage); background: rgba(188,197,164,.13); }
.tableau-card.significator { box-shadow: 0 0 0 2px var(--len-rust); }
.tableau-card.core:after { content: "core"; display: block; padding: 4px 8px 0; color: var(--len-sage); font-size: 7px; text-transform: uppercase; letter-spacing: .13em; }
.tableau-focus {
  display: grid;
  grid-template-columns: minmax(220px,.65fr) minmax(300px,1.35fr);
  gap: 6vw;
  margin-top: 0;
  padding: 70px 5vw;
  background: #252925;
  color: #e6e5d9;
}
.tableau-focus .len-card-art { max-width: 280px; justify-self: end; }
.tableau-focus-copy { max-width: 760px; align-self: center; }
.tableau-focus h3 { margin: 0; font-size: 52px; }
.focus-quatrain {
  margin: 22px 0;
  padding: 20px 23px;
  border: 1px solid rgba(230,229,217,.15);
  color: rgba(230,229,217,.82);
}
.focus-quatrain .quatrain-label,
.focus-quatrain .translation-label { color: var(--len-sage); }
.focus-quatrain blockquote {
  margin: 0;
  font-family: "Italiana",serif;
  font-size: 19px;
  line-height: 1.6;
  white-space: pre-line;
}
.focus-translation { margin: 0; font-size: 13px; line-height: 1.7; font-style: italic; }
.house-line { margin: 20px 0; padding: 17px 20px; border-left: 3px solid var(--len-sage); background: rgba(255,255,255,.04); line-height: 1.7; }
.neighbor-line { line-height: 1.75; color: rgba(230,229,217,.75); }
.neighbor-reading { margin-top: 30px; padding-top: 25px; border-top: 1px solid rgba(230,229,217,.15); }
.neighbor-reading .eyebrow { margin-bottom: 14px; color: var(--len-sage); }
.neighbor-reading p:not(.eyebrow) { margin: 10px 0; color: rgba(230,229,217,.76); font-size: 13px; line-height: 1.7; }
.neighbor-reading strong { color: #f0efe3; font-weight: 500; text-transform: capitalize; }
.tableau-summary {
  padding: 60px 5vw;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1px;
  background: rgba(24,26,23,.18);
}
.summary-block { padding: 35px; background: #d5d5c8; }
.summary-block h3 { margin: 0 0 18px; font-size: 30px; }
.summary-block p { font-size: 13px; line-height: 1.75; }
.summary-block button { margin-top: 8px; padding: 0; border: 0; border-bottom: 1px solid; background: none; cursor: pointer; font-size: 10px; text-transform: uppercase; letter-spacing: .11em; }

.lenormand-chat { margin-top: 75px; }
.lenormand-archive {
  padding: 125px 7vw;
  color: #e7e6da;
  background:
    radial-gradient(circle at 78% 23%, rgba(191,199,164,.16), transparent 20%),
    linear-gradient(125deg,#252a27,#121513 65%);
}
.archive-intro { display: grid; grid-template-columns: .8fr 1.2fr; gap: 3vw 8vw; align-items: end; }
.archive-intro h2 { margin: 0; font-size: clamp(52px,6vw,84px); line-height: .95; }
.archive-intro > p:last-child { line-height: 1.8; color: rgba(231,230,218,.72); }
.lenormand-archive .eyebrow { grid-column: 1/-1; color: var(--len-sage); }
.archive-select { max-width: 550px; margin: 70px 0 30px; }
.archive-select label { display: block; margin-bottom: 12px; text-transform: uppercase; letter-spacing: .14em; font-size: 9px; }
.archive-select select { color: #e7e6da; border-color: rgba(231,230,218,.38); }
.archive-select option { color: #1a1c19; }
.archive-result .len-card-detail { justify-content: start; }
.archive-result .quatrain-label,
.archive-result .translation-label { color: var(--len-sage); }
.archive-result .literal { color: rgba(231,230,218,.72); }
.archive-result .reader-note { color: #e7e6da; }
.archive-result .editorial-note { border-color: rgba(231,230,218,.17); }
.archive-result .card-library-link,
.archive-library-link { color: #e7e6da; }
.lenormand-method { padding: 130px 7vw; background: #d5d5c8; }
.lenormand-method > div:first-child { display: grid; grid-template-columns: 1fr 1.5fr; gap: 7vw; align-items: start; }
.lenormand-method h2 { margin: 0; font-size: clamp(54px,7vw,96px); line-height: .92; }
.method-columns { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; margin-top: 70px; background: rgba(24,26,23,.2); }
.method-columns article { padding: 40px; background: #dcdbce; }
.method-columns span { color: #6e6c7f; font-family: "Italiana",serif; font-size: 35px; }
.method-columns h3 { margin: 20px 0 12px; font-size: 32px; }
.method-columns p { font-size: 13px; line-height: 1.75; }
.method-note { max-width: 780px; margin: 70px 0 0 auto; padding-top: 28px; border-top: 1px solid rgba(24,26,23,.24); font-family: "Italiana",serif; font-size: 23px; line-height: 1.55; }

@media(max-width:900px) {
  .lenormand-hero { grid-template-columns: 1fr 1fr; gap: 3vw; }
  .lenormand-hero-cards { min-height: 500px; }
  .hero-card { width: min(32vw,260px); }
  .lenormand-setup { padding: 42px 30px; }
  .tableau-summary { grid-template-columns: 1fr; }
}
@media(max-width:720px) {
  .lenormand-hero { min-height: auto; padding: 90px 7vw 60px; grid-template-columns: 1fr; }
  .lenormand-hero h1 { font-size: clamp(58px,16vw,84px); }
  .lenormand-hero-cards { min-height: 470px; margin-top: 35px; }
  .hero-card { width: min(59vw,275px); }
  .lenormand-origin { padding: 85px 6vw; grid-template-columns: 1fr; gap: 55px; }
  .origin-heading { position: static; }
  .lenormand-reader,.lenormand-archive,.lenormand-method { padding: 85px 6vw; }
  .lenormand-modes { gap: 28px; }
  .lenormand-setup,.len-card-detail,.tableau-focus { grid-template-columns: 1fr; }
  .lenormand-setup { gap: 45px; }
  .lenormand-back { width: 180px; }
  .len-card-art,.tableau-focus .len-card-art { max-width: 270px; justify-self: center; margin: auto; }
  .three-line-cards { grid-template-columns: 1fr; gap: 60px; }
  .line-card:nth-child(2) { transform: none; }
  .line-reading { margin-top: 55px; padding: 32px 25px; }
  .tableau-intro { display: block; }
  .tableau-option { margin-top: 28px; }
  .archive-intro,.lenormand-method > div:first-child,.method-columns { grid-template-columns: 1fr; }
  .archive-intro .eyebrow { grid-column: auto; }
  .method-columns article { border-bottom: 1px solid rgba(24,26,23,.16); }
}