:root {
  --ink: #151515;
  --paper: #ded7ca;
  --cream: #ebe4d8;
  --blue: #265cff;
  --acid: #d8ff3e;
  --muted: #68665f;
  --rule: rgba(21, 21, 21, 0.18);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #bdb5a7;
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  position: relative;
}
body::before, body::after {
  content: "";
  position: fixed;
  z-index: 0;
  pointer-events: none;
  background: url("../images/dyesign-logo.png") center / contain no-repeat;
  filter: grayscale(1) brightness(.18) blur(2.5px);
}
body::before {
  width: min(1120px, 92vw);
  height: 76vh;
  left: 50%;
  top: 50%;
  opacity: .19;
  transform: translate(-50%, -50%) rotate(-8deg);
}
body::after {
  width: min(760px, 65vw);
  height: 54vh;
  right: -18vw;
  bottom: -15vh;
  opacity: .09;
  transform: rotate(16deg);
}
main { overflow: hidden; position: relative; z-index: 1; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 3px solid var(--blue); outline-offset: 5px; }

.site-header {
  width: min(100% - 48px, 1420px);
  height: 92px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-bottom: 1px solid var(--rule);
  position: relative;
  z-index: 20;
}
.brand { display: inline-flex; align-items: center; width: max-content; }
.logo-window { width: 176px; height: 72px; position: relative; display: flex; align-items: center; }
.logo-window img { display: block; width: 168px; height: auto; object-fit: contain; }
.site-header nav { display: flex; gap: 34px; font-size: 13px; font-weight: 700; }
.site-header nav a, .footer-links a { position: relative; }
.site-header nav a::after, .footer-links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -6px; height: 2px; background: var(--blue); transition: right .25s ease; }
.site-header nav a:hover::after, .footer-links a:hover::after { right: 0; }
.header-cta { justify-self: end; display: flex; align-items: center; gap: 14px; font-size: 13px; font-weight: 800; }
.header-cta span { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: white; background: var(--ink); transition: transform .2s ease; }
.header-cta:hover span { transform: translateX(4px); }

.hero {
  width: min(100% - 48px, 1420px);
  min-height: 720px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  align-items: center;
  overflow: hidden;
  position: relative;
  isolation: isolate;
  background: rgba(222,215,202,.76);
}
.hero > * { position: relative; z-index: 2; }
.hero::before {
  content: none;
}
.hero::after { content: "✦"; position: absolute; color: rgba(38,92,255,.20); font-family: Georgia, serif; pointer-events: none; }
.hero::after { left: 5%; bottom: 9%; font-size: 15px; }
.hero-copy { padding: 72px 0 76px; position: relative; z-index: 4; filter: drop-shadow(0 10px 14px rgba(244,240,231,.45)); }
.eyebrow { margin: 0 0 28px; display: flex; align-items: center; gap: 11px; text-transform: uppercase; letter-spacing: .17em; font-size: 11px; font-weight: 800; }
.eyebrow > span { display: block; width: 26px; height: 2px; background: var(--blue); }
h1, h2 { margin: 0; font-family: Georgia, 'Times New Roman', serif; font-weight: 400; letter-spacing: -.065em; line-height: .89; }
h1 { font-size: clamp(70px, 8.3vw, 132px); }
h1 em, h2 em { font-weight: 400; color: var(--blue); }
.hero-intro { max-width: 570px; margin: 38px 0 0 6px; font-size: clamp(18px, 1.6vw, 23px); line-height: 1.48; letter-spacing: -.02em; }
.hero-actions { display: flex; align-items: center; gap: 32px; margin: 38px 0 0 6px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 28px; min-height: 55px; padding: 0 26px; font-size: 13px; font-weight: 800; transition: transform .2s ease, box-shadow .2s ease; }
.button:hover { transform: translateY(-3px); box-shadow: 0 8px 0 rgba(21,21,21,.12); }
.button-dark { background: var(--ink); color: white; }
.button-blue { background: var(--blue); color: white; }
.text-link { display: inline-flex; gap: 10px; font-size: 13px; font-weight: 800; border-bottom: 1px solid var(--ink); padding-bottom: 5px; }

.hero-visual { height: 620px; position: relative; }
.hero-visual::after { content: "☾  ·  ✦  ·  ✧"; position: absolute; left: 7%; top: 8%; color: rgba(21,21,21,.48); font-family: Georgia, serif; font-size: 22px; letter-spacing: .42em; transform: rotate(-9deg); }
.hero-visual::before { content: ""; width: 500px; height: 500px; border-radius: 50%; background: var(--acid); position: absolute; left: 50%; top: 48%; transform: translate(-48%, -50%); }
.orbit { position: absolute; border: 1px solid rgba(21,21,21,.3); border-radius: 50%; left: 50%; top: 49%; transform: translate(-50%, -50%); z-index: 1; }
.orbit-one { width: 580px; height: 350px; transform: translate(-50%, -50%) rotate(-24deg); }
.orbit-two { width: 380px; height: 600px; transform: translate(-50%, -50%) rotate(66deg); }
.hero-book { position: absolute; width: 246px; z-index: 3; filter: drop-shadow(18px 25px 18px rgba(0,0,0,.30)); transition: transform .35s ease; }
.hero-book-back { left: 9%; top: 23%; transform: rotate(-17deg); }
.hero-book-mid { right: 8%; top: 19%; transform: rotate(15deg); }
.hero-book-front { left: 34%; top: 11%; transform: rotate(-2deg); z-index: 5; }
.hero-book-back:hover { transform: rotate(-20deg) translateY(-10px); }
.hero-book-mid:hover { transform: rotate(18deg) translateY(-10px); }
.hero-book-front:hover { transform: rotate(-2deg) translateY(-12px); }
.scribble { position: absolute; z-index: 7; right: 1%; bottom: 9%; transform: rotate(-7deg); font-family: 'Comic Sans MS', cursive; font-size: 17px; line-height: 1.15; }

.book-cover { aspect-ratio: .73; width: 100%; padding: 23px 20px 18px; display: flex; flex-direction: column; position: relative; overflow: hidden; border: 1px solid rgba(0,0,0,.65); box-shadow: inset -7px 0 0 rgba(0,0,0,.1); }
.cover-image { display: block; width: 100%; height: auto; aspect-ratio: .73; object-fit: cover; border: 1px solid rgba(0,0,0,.55); box-shadow: 15px 20px 25px rgba(0,0,0,.19); }
.book-cover.small { padding: 18px 16px 14px; }
.cover-kicker, .cover-footer { position: relative; z-index: 2; text-transform: uppercase; font-size: 7px; font-weight: 800; letter-spacing: .14em; }
.book-cover > strong { position: relative; z-index: 2; margin-top: auto; font-family: Georgia, serif; font-size: clamp(23px, 2.2vw, 36px); line-height: .91; letter-spacing: -.05em; }
.book-cover.small > strong { font-size: 27px; }
.cover-footer { margin-top: 15px; padding-top: 9px; border-top: 1px solid currentColor; }
.cover-art { position: absolute; width: 116%; height: 66%; left: -8%; top: 11%; opacity: .9; }
.cover-art i { position: absolute; display: block; border: 2px solid currentColor; border-radius: 50%; }
.cover-art i:nth-child(1) { width: 62%; aspect-ratio: 1; left: 18%; top: 7%; }
.cover-art i:nth-child(2) { width: 42%; aspect-ratio: 1; left: 47%; top: 25%; border-style: dashed; }
.cover-art i:nth-child(3) { width: 72%; height: 32%; left: -3%; bottom: 4%; border-radius: 50% 50% 0 0; transform: rotate(-8deg); }
.dreamscape { background: #b79cff; color: #161522; }
.dreamscape .cover-art::after { content: "✦"; position: absolute; right: 3%; top: 2%; font-size: 35px; }
.wildlife { background: #ec5a33; color: #21120d; }
.wildlife .cover-art i:nth-child(1) { border-radius: 50% 50% 42% 58%; transform: rotate(18deg); }
.wildlife .cover-art::after { content: "✺"; position: absolute; left: 4%; top: 3%; font-size: 35px; }
.motors { background: #f2ca3f; color: #17150d; }
.motors .cover-art i:nth-child(1), .motors .cover-art i:nth-child(2) { top: 37%; width: 39%; }
.motors .cover-art i:nth-child(1) { left: 4%; }
.motors .cover-art i:nth-child(2) { left: 57%; border-style: solid; }

.ticker { min-height: 64px; padding: 14px 30px; background: var(--blue); color: white; display: flex; align-items: center; justify-content: space-around; gap: 26px; overflow: hidden; text-transform: uppercase; font-size: 10px; font-weight: 800; letter-spacing: .14em; white-space: nowrap; }
.ticker i { color: var(--acid); font-size: 18px; font-style: normal; }

.books-section { padding: 124px max(24px, calc((100vw - 1420px) / 2)) 138px; background: rgba(235,228,216,.84); position: relative; isolation: isolate; }
.books-section > * { position: relative; z-index: 2; }
.books-section::after { content: none; }
.books-section::before { content: "✦"; position: absolute; right: 5%; top: 54px; color: rgba(38,92,255,.22); font-size: 34px; }
.section-heading { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 10%; margin-bottom: 72px; }
.section-heading h2, .story-copy h2, .puzzle-copy h2, .final-cta h2 { font-size: clamp(62px, 7vw, 112px); }
.section-heading > p { max-width: 480px; margin: 0 0 5px auto; font-size: 18px; line-height: 1.55; color: var(--muted); }
.book-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(22px, 3vw, 48px); }
.book-card { min-width: 0; filter: drop-shadow(0 20px 23px rgba(54,45,35,.09)); }
.book-art-wrap { min-height: 540px; padding: 44px 14%; display: flex; align-items: center; justify-content: center; position: relative; background: #e7e1d5; overflow: hidden; }
.book-card:nth-child(2) .book-art-wrap { background: #dbe2df; }
.book-card:nth-child(3) .book-art-wrap { background: #e2ddd5; }
.book-art-wrap .book-cover { max-width: 290px; transform: rotate(-2deg); box-shadow: 15px 20px 25px rgba(0,0,0,.19); transition: transform .35s ease; }
.book-art-wrap .cover-image { max-width: 290px; transform: rotate(-2deg); transition: transform .35s ease; }
.book-card:nth-child(2) .cover-image { transform: rotate(2deg); }
.book-card:nth-child(3) .cover-image { transform: rotate(-1deg); }
.book-card:hover .cover-image { transform: rotate(0) translateY(-9px) scale(1.015); }
.book-card:nth-child(2) .book-cover { transform: rotate(2deg); }
.book-card:nth-child(3) .book-cover { transform: rotate(-1deg); }
.book-card:hover .book-cover { transform: rotate(0) translateY(-9px) scale(1.015); }
.book-number { position: absolute; top: 19px; left: 22px; font-family: Georgia, serif; font-size: 16px; }
.book-copy { padding-top: 25px; }
.book-copy > p:first-child { margin: 0 0 15px; text-transform: uppercase; letter-spacing: .12em; font-size: 9px; font-weight: 800; color: var(--muted); }
.book-copy h3 { margin: 0; font-family: Georgia, serif; font-size: 31px; line-height: 1; letter-spacing: -.04em; }
.book-description { min-height: 78px; margin: 15px 0 22px; font-size: 14px; line-height: 1.55; color: var(--muted); }
.book-copy a { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 14px 0; font-size: 12px; font-weight: 800; }
.book-copy a span { font-size: 18px; transition: transform .2s ease; }
.book-copy a:hover span { transform: translate(4px, -4px); }

.story-section { min-height: 760px; padding: 110px max(24px, calc((100vw - 1420px) / 2)); display: grid; grid-template-columns: .72fr 1.28fr; align-items: center; gap: 9%; background: rgba(21,21,21,.95); color: white; }
.story-stamp { justify-self: center; width: 330px; height: 330px; border: 1px solid rgba(255,255,255,.45); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; transform: rotate(-8deg); position: relative; }
.story-stamp::before, .story-stamp::after { content: "✦"; position: absolute; color: var(--acid); font-size: 23px; top: 50%; transform: translateY(-50%); }
.story-stamp::before { left: 24px; } .story-stamp::after { right: 24px; }
.story-stamp strong { font-family: Georgia, serif; font-size: 135px; font-weight: 400; line-height: .8; color: var(--acid); }
.story-stamp span { text-transform: uppercase; font-size: 9px; letter-spacing: .26em; font-weight: 800; }
.eyebrow.light > span { background: var(--acid); }
.story-copy h2 em { color: var(--acid); }
.story-lead { max-width: 760px; font-size: clamp(21px, 2vw, 28px); line-height: 1.42; letter-spacing: -.02em; }
.story-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 45px; max-width: 760px; color: #bbb8b0; font-size: 14px; line-height: 1.7; }

.puzzle-section { min-height: 760px; padding: 105px max(24px, calc((100vw - 1420px) / 2)); display: grid; grid-template-columns: 1fr 1fr; gap: 9%; align-items: center; background: rgba(216,208,194,.82); position: relative; isolation: isolate; }
.puzzle-section > * { position: relative; z-index: 2; }
.puzzle-section::before { content: none; }
.puzzle-board { aspect-ratio: 1; max-width: 580px; width: 100%; position: relative; background: var(--blue); transform: rotate(-2deg); box-shadow: 22px 25px 0 var(--acid); overflow: hidden; }
.puzzle-board::after { content: "PIECE BY PIECE"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(5deg); width: 80%; text-align: center; color: white; font-family: Georgia, serif; font-style: italic; font-size: clamp(43px, 5vw, 78px); line-height: .8; z-index: 3; }
.piece { position: absolute; width: 27%; aspect-ratio: 1; border: 3px solid var(--acid); border-radius: 20% 45% 25% 40%; opacity: .8; }
.p1 { left: -3%; top: -4%; }.p2 { left: 23%; top: 2%; transform: rotate(23deg); }.p3 { right: 10%; top: -6%; transform: rotate(48deg); }.p4 { right: -8%; top: 29%; }
.p5 { left: -6%; bottom: 19%; transform: rotate(35deg); }.p6 { left: 24%; bottom: -4%; transform: rotate(70deg); }.p7 { right: 17%; bottom: 3%; }.p8 { left: 39%; top: 35%; transform: rotate(22deg); }
.coming-soon { margin: 0 0 12px; display: inline-block; padding: 8px 12px; background: var(--acid); text-transform: uppercase; font-size: 10px; letter-spacing: .12em; font-weight: 900; transform: rotate(-2deg); }
.puzzle-copy > p:not(.eyebrow):not(.coming-soon) { max-width: 600px; margin: 30px 0; font-size: 17px; line-height: 1.6; color: var(--muted); }

.final-cta { min-height: 540px; padding: 96px 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; position: relative; isolation: isolate; background: rgba(222,215,202,.78); }
.final-cta > * { position: relative; z-index: 2; }
.final-cta::before { content: none; }
.final-cta h2 { text-shadow: 0 14px 22px rgba(244,240,231,.62); }
.final-cta > p { text-transform: uppercase; letter-spacing: .18em; font-size: 10px; font-weight: 800; }
.final-cta h2 { font-size: clamp(66px, 8vw, 125px); }
.round-link { width: 66px; height: 66px; margin-top: 35px; border-radius: 50%; background: var(--blue); color: white; display: grid; place-items: center; font-size: 24px; transition: transform .25s ease; }
.round-link:hover { transform: rotate(-25deg) scale(1.08); }

footer { min-height: 260px; padding: 50px max(24px, calc((100vw - 1420px) / 2)); display: grid; grid-template-columns: 1fr 1fr auto; grid-template-rows: 1fr auto; gap: 28px 60px; align-items: start; background: rgba(21,21,21,.96); color: white; }
.logo-window-footer { filter: invert(1); }
footer > p { margin: 0; color: #aaa8a2; font-size: 12px; line-height: 1.7; }
.footer-links { display: flex; gap: 27px; font-size: 12px; font-weight: 700; }
.copyright { grid-column: 1 / -1; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.18); }

@media (max-width: 1050px) {
  .site-header { grid-template-columns: 1fr auto; }
  .site-header nav { display: none; }
  .hero { min-height: 650px; grid-template-columns: 1.05fr .95fr; }
  .hero-visual { transform: scale(.82); transform-origin: center; }
  .hero-book-back { left: 0; } .hero-book-mid { right: -5%; } .hero-book-front { left: 29%; }
  .book-art-wrap { min-height: 430px; padding: 45px 12%; }
  .story-stamp { width: 260px; height: 260px; }
  .story-stamp strong { font-size: 105px; }
}

@media (max-width: 760px) {
  .site-header { width: min(100% - 32px, 1420px); height: 76px; }
  .header-cta { font-size: 0; }
  .hero { width: 100%; min-height: auto; padding: 0 18px 62px; grid-template-columns: 1fr; }
  .hero-copy { padding: 62px 0 20px; }
  h1 { font-size: clamp(58px, 18vw, 88px); }
  .hero-intro { font-size: 18px; }
  .hero-actions { flex-direction: column; align-items: flex-start; gap: 22px; }
  .hero-visual { height: 500px; transform: scale(.78); margin: -35px -80px -70px; }
  .ticker { justify-content: flex-start; overflow-x: hidden; }
  .section-heading { grid-template-columns: 1fr; gap: 35px; }
  .section-heading > p { margin: 0; }
  .book-grid { grid-template-columns: 1fr; gap: 65px; }
  .book-art-wrap { min-height: 500px; }
  .book-description { min-height: auto; }
  .story-section { grid-template-columns: 1fr; gap: 70px; padding-top: 90px; }
  .story-stamp { grid-row: 2; }
  .story-columns { grid-template-columns: 1fr; gap: 6px; }
  .puzzle-section { grid-template-columns: 1fr; gap: 80px; }
  .puzzle-board { grid-row: 2; }
  footer { grid-template-columns: 1fr; grid-template-rows: auto; }
  .copyright { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}