:root {
  --paper: #f7f1e5;
  --paper-deep: #efe5d2;
  --ink: #1d1a24;
  --ink-soft: #5b5566;
  --cobalt: #2140a8;
  --cobalt-deep: #14255f;
  --sun: #f2b53a;
  --sage: #6f8c6a;
  --terracotta: #b4553a;
  --line: #dccfb6;
  --gutter: clamp(16px, 8.3vw, 120px);
  --section-y: clamp(72px, 9vw, 128px);
  --serif: "Fraunces", Georgia, serif;
  --sans: "DM Sans", system-ui, sans-serif;
  --hand: "Caveat", cursive;
  --shadow: 0 30px 60px -10px rgb(13 10 26 / 0.28), 0 6px 14px rgb(13 10 26 / 0.18);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; margin: 0; }
h1 { font-size: clamp(48px, 6.1vw, 88px); line-height: 1.08; letter-spacing: -0.02em; }
h2 { font-size: clamp(40px, 4.4vw, 64px); line-height: 1.1; letter-spacing: -0.015em; }
h3 { font-size: clamp(26px, 2.5vw, 36px); line-height: 1.2; }
em { font-style: italic; }
p { margin: 0; }
ul, ol { list-style: none; margin: 0; padding: 0; }

.eyebrow { font: 600 13px/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; }
.sun { color: var(--sun); }
.sage { color: var(--sage); }
.terracotta { color: var(--terracotta); }
.muted { color: var(--ink-soft); }
.soft { opacity: 0.85; }
.body-l { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.6; }
.small { font-size: 14px; }
.hand { font: 24px/1.2 var(--hand); color: var(--ink-soft); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.stack { display: flex; flex-direction: column; gap: 24px; min-width: 0; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; border-radius: 999px; border: 1.5px solid transparent; font: 600 15px/1.3 var(--sans); letter-spacing: 0.02em; text-decoration: none; transition: transform .15s, background-color .15s; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--cobalt); color: #fff; }
.btn-sun { background: var(--sun); color: var(--ink); }
.btn-outline { border-color: var(--ink); }
.btn-outline-dark { border-color: #fff; color: #fff; }
.icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.inquiry { display: flex; flex-direction: column; gap: 14px; }
.cobalt .hand, .deep .hand { color: #fff; opacity: 0.85; }

/* Nav */
.nav { position: absolute; inset: 0 0 auto; z-index: 10; display: flex; align-items: center; gap: 40px; padding: 32px var(--gutter); color: #fff; }
.logo { display: flex; align-items: center; gap: 12px; font: 600 28px/1 var(--serif); text-decoration: none; margin-right: auto; }
.logo img { width: 44px; height: 44px; border-radius: 50%; background: #fff; object-fit: cover; }
.links { display: flex; gap: 40px; font-weight: 500; }
.links a, .menu nav a { text-decoration: none; }
.links a:hover { color: var(--sun); }
.menu { display: none; }

/* Hero slider: copy and art share a grid so they can never overlap */
.hero { position: relative; overflow: hidden; background: var(--cobalt-deep); color: #fff; min-height: max(640px, min(880px, 100svh)); padding: 140px var(--gutter) 120px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 5vw, 80px); }
.hero-bg, .hero-bg .slide { position: absolute; inset: 0; }
.hero-bg .slide { inset: -80px; width: calc(100% + 160px); height: calc(100% + 160px); max-width: none; object-fit: cover; filter: blur(18px); }
.hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(15 23 61 / .92), rgb(15 23 61 / .6) 50%, rgb(15 23 61 / .25)); }
.slide { opacity: 0; transition: opacity .9s ease; }
.slide.is-active { opacity: 1; }
.hero-copy { position: relative; z-index: 1; max-width: 600px; display: flex; flex-direction: column; gap: 28px; }
.hero-copy .eyebrow { color: var(--sun); }
.hero-copy h1 em { color: var(--sun); }
.hero-copy .lead { font-size: clamp(17px, 1.4vw, 20px); opacity: .86; max-width: 560px; }
.hero-art { position: relative; z-index: 1; width: 100%; max-width: 560px; aspect-ratio: 560 / 620; justify-self: end; }
.hero-art .slide { position: absolute; inset: 0; }
.art { position: absolute; padding: 14px; background: #fff; border-radius: 4px; box-shadow: var(--shadow); object-fit: cover; transition: transform 1.2s ease; }
.art-front { width: 76%; aspect-ratio: 440 / 580; left: 0; top: 2%; transform: rotate(3deg); }
.art-back { width: 56%; aspect-ratio: 330 / 430; right: 0; top: 16%; transform: rotate(-7deg); }
.slide:not(.is-active) .art-front { transform: rotate(6deg); }
.bars { position: absolute; z-index: 1; left: var(--gutter); bottom: 56px; display: flex; gap: 8px; }
.bars button { width: 36px; height: 20px; padding: 0; border: 0; cursor: pointer; background: linear-gradient(rgb(255 255 255 / .35), rgb(255 255 255 / .35)) center / 100% 3px no-repeat; transition: width .3s; }
.bars button.on { width: 72px; background-image: linear-gradient(var(--sun), var(--sun)); }

/* Sections */
.section { padding: var(--section-y) var(--gutter); }
.paper { background: var(--paper); }
.cobalt { background: var(--cobalt); color: #fff; }
.deep { background: var(--cobalt-deep); color: #fff; padding-bottom: 48px; }
.split { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: clamp(40px, 6.7vw, 96px); align-items: center; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chips li:not(.hand) { padding: 7px 14px; border: 1.5px solid var(--line); border-radius: 999px; font-size: 14px; font-weight: 500; }
.chips.on-dark li:not(.hand) { border: 0; background: rgb(255 255 255 / .12); }
.chips.on-dark .hand { margin-right: 4px; }

/* Books */
.book { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: clamp(40px, 6.7vw, 96px); align-items: center; }
.subtitle { font: italic 30px/1.25 var(--serif); color: var(--ink-soft); margin-top: 6px; }
.book-stage { position: relative; aspect-ratio: 560 / 660; }
.book-stage::before { content: ""; position: absolute; inset: 10% 4% 11%; border-radius: 50%; background: var(--paper-deep); }
.book-stage img { position: absolute; border-radius: 4px; box-shadow: var(--shadow); }
.book-front { width: 75%; left: 7%; top: 9%; transform: rotate(2deg); }
.book-back { width: 59%; left: 42%; top: 24%; transform: rotate(-6deg); }
.pitch { margin-top: 64px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px 64px; padding: clamp(28px, 4vw, 48px) clamp(24px, 4vw, 56px); background: var(--paper-deep); border-radius: 16px; }
.pitch > div:first-child { flex: 1 1 380px; display: flex; flex-direction: column; gap: 10px; }

/* Commissions */
.steps li { display: flex; gap: 20px; padding: 18px 0; border-top: 1px solid rgb(255 255 255 / .2); }
.steps b { width: 40px; flex: none; font: italic 24px/1.3 var(--serif); color: var(--sun); }
.steps strong { display: block; }
.steps span { opacity: .7; }
.gallery { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 16px; aspect-ratio: 1 / 1.03; }
.gallery img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.gallery .tall { grid-row: span 2; }

/* Originals */
.head { align-items: end; grid-template-columns: 1fr 1fr; margin-bottom: 56px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 48px 24px; }
.card { position: relative; }
.card img { width: 100%; aspect-ratio: 282 / 360; object-fit: cover; border-radius: 8px; margin-bottom: 14px; }
.card h3 { font: 600 22px/1.3 var(--serif); }
.card p { font-size: 14px; color: var(--ink-soft); }
.more-cta { margin-top: 64px; padding-top: 40px; border-top: 1.5px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px; }
.big { font: 32px/1.25 var(--serif); flex: 1 1 380px; }

/* About and contact */
.artist { display: flex; align-items: center; gap: 16px; }
.artist img { border-radius: 50%; border: 2px solid var(--sun); }
.artist strong { display: block; font-size: 20px; font-weight: 600; }
.artist span { font-size: 14px; opacity: .7; }
.contact-card { display: flex; flex-direction: column; gap: 10px; padding: clamp(24px, 3vw, 40px); border: 1px solid rgb(255 255 255 / .14); border-radius: 16px; background: rgb(255 255 255 / .06); }
.contact-card h3 { font-size: 28px; }
.contact-card .inquiry { margin-top: 18px; }
.contact-card .row .btn { flex: 1 1 auto; justify-content: center; }
.topic { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 12px; padding: 16px 20px; border-radius: 12px; background: rgb(255 255 255 / .08); font-size: 17px; font-weight: 500; text-decoration: none; }
.topic:hover { background: rgb(255 255 255 / .14); }
.topic span { font-size: 14px; font-weight: 400; opacity: .6; }
.footer { margin-top: 112px; padding-top: 32px; border-top: 1px solid rgb(255 255 255 / .14); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; font-size: 14px; }
.footer .logo { font-size: 22px; margin: 0; }
.footer .logo img { width: 36px; height: 36px; }
.footer p { opacity: .6; }
.footer nav { display: flex; gap: 28px; }
.footer nav a { opacity: .8; text-decoration: none; }

:focus-visible { outline: 2px solid var(--sun); outline-offset: 3px; }

@media (max-width: 1024px) {
  .links { display: none; }
  .menu { display: block; position: relative; }
  .menu summary { display: block; cursor: pointer; list-style: none; font-weight: 600; padding: 10px 18px; border: 1.5px solid #fff; border-radius: 999px; }
  .menu summary::-webkit-details-marker { display: none; }
  .menu nav { display: flex; position: absolute; right: 0; top: calc(100% + 8px); flex-direction: column; gap: 4px; min-width: 220px; padding: 12px; border-radius: 16px; background: var(--cobalt-deep); box-shadow: var(--shadow); }
  .menu nav a { padding: 10px 12px; }
  .nav { gap: 12px; }
  .split, .book, .head, .hero { grid-template-columns: 1fr; }
  .hero-art { order: -1; justify-self: center; max-width: 440px; }
  .book-stage { max-width: 520px; width: 100%; margin: 0 auto; }
}

@media (max-width: 720px) {
  .nav { padding-block: 20px; }
  .logo { font-size: 24px; }
  .nav-ig { display: none; }
  .hero { padding: 104px var(--gutter) 96px; min-height: auto; }
  .hero-bg::after { background: linear-gradient(180deg, rgb(15 23 61 / .5), rgb(15 23 61 / .9) 60%); }
  .hero-copy .row .btn { flex: 1 1 auto; justify-content: center; }
  .bars { bottom: 40px; }
  .gallery { aspect-ratio: auto; grid-template-rows: 280px 180px; }
  .grid { grid-template-columns: 1fr 1fr; gap: 32px 12px; }
  .card h3 { font-size: 18px; }
  .inquiry .row .btn { flex: 1 1 auto; justify-content: center; }
  .footer nav { flex-wrap: wrap; gap: 12px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .slide, .art, .btn, .bars button { transition: none; }
}