:root {
  --paper: #e6e0d5;
  --ink: #252723;
  --muted: #6a685f;
  --line: rgba(37, 39, 35, .35);
  --serif: Georgia, "Times New Roman", serif;
  --sans: Arial, Helvetica, sans-serif;
  --horizon-y: 52%;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; }

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .12;
  z-index: 50;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
}


.shell { width: min(1260px, calc(100% - 64px)); margin: 0 auto; position: relative; z-index: 3; }
.section { position: relative; }
.eyebrow { font-size: 11px; letter-spacing: .18em; margin: 0 0 14px; color: var(--muted); }

.hero { min-height: 100svh; display: grid; align-items: end; overflow: hidden; }
.hero-scene { position: absolute; inset: 0; overflow: hidden; background: #cad7dc; }
.hero-scene.has-custom-image,
.studio-image.has-custom-image,
.gallery-piece > div.has-custom-art,
.finale.has-custom-image {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.hero-sky { position: absolute; inset: 0 0 43% 0; background: linear-gradient(#c9d7dd, #dfe4df 70%, #e7d3b6); }
.hero-ground { position: absolute; inset: 57% 0 0 0; background: linear-gradient(#87928c, #697a73 58%, #5b655f); }
.hero-ground::before { content: ""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(255,255,255,.08), transparent 35%, rgba(0,0,0,.06)); }
.hero-sun { position: absolute; width: 66px; height: 66px; border-radius: 50%; left: 67%; top: 33%; background: rgba(239,218,177,.88); box-shadow: 0 0 80px rgba(239,218,177,.35); }
.hero::after { content:""; position:absolute; left:0; right:0; top:57%; height:1px; background:#40453f; opacity:.72; z-index:1; }
.hero.has-custom-image::after { display:none; }
.hero-scene.has-custom-image::after,
.finale.has-custom-image::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(to bottom, rgba(230,224,213,.06), rgba(37,39,35,.12));
}
.art-links a:focus-visible,
.contract-card button:focus-visible,
.final-links a:focus-visible,
.final-links button:focus-visible {
  outline:2px solid rgba(218,166,88,.92);
  outline-offset:3px;
}
.hero-actions {
  grid-area:actions;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:12px;
  width:min(490px, calc(100vw - 64px));
  transform:translate(clamp(0px, calc((100vw - 1260px) / 2 - 16px), 120px), -44px);
}
.hero-copy {
  padding-bottom:54px;
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  grid-template-areas:"title actions";
  gap:18px 50px;
  align-items:end;
}
.hero-title-wrap { grid-area:title; max-width: 800px; }
.study-note { font-family: "Segoe Print", "Bradley Hand", cursive; font-size: 14px; transform: rotate(-2deg); margin:0 0 -2px 6px; color:#4b4c46; }
h1 { font-family: var(--serif); font-weight:400; font-size: clamp(78px, 13vw, 205px); letter-spacing:-.07em; line-height:.75; margin:0; }
.hero-sub { margin:20px 0 0; font-size:12px; letter-spacing:.22em; }
.art-links {
  display:flex;
  gap:9px;
  max-width:100%;
  padding:7px;
  background:rgba(246,239,226,.82);
  border:1px solid rgba(65,55,43,.48);
  border-radius:4px;
  box-shadow:0 14px 34px rgba(24,25,22,.20), inset 0 1px 0 rgba(255,255,255,.70);
  backdrop-filter:blur(8px);
}
.art-links a {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:0 15px;
  background:rgba(33,51,66,.92);
  border:1px solid rgba(255,255,255,.24);
  border-radius:3px;
  color:#f7efe1;
  font-size:10px;
  font-weight:700;
  letter-spacing:.16em;
  box-shadow:0 8px 16px rgba(24,25,22,.18);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.art-links a[data-link="buy"] {
  background:#d6a058;
  border-color:rgba(255,247,225,.64);
  color:#211b13;
}
.art-links a span { font-size:12px; margin-left:7px; letter-spacing:.08em; }
.art-links a:hover {
  transform:translateY(-1px);
  background:#263b4c;
  box-shadow:0 12px 22px rgba(24,25,22,.26);
}
.art-links a[data-link="buy"]:hover { background:#e2b46c; }
.contract-card {
  display:grid;
  grid-template-columns:auto minmax(170px, 1fr) auto;
  gap:12px;
  align-items:center;
  width:min(490px, 100%);
  background:rgba(246,239,226,.88);
  border:1px solid rgba(65,55,43,.50);
  border-radius:4px;
  padding:10px;
  box-shadow:0 14px 34px rgba(24,25,22,.20), inset 0 1px 0 rgba(255,255,255,.72);
  backdrop-filter: blur(8px);
}
.contract-card .eyebrow { margin:0; color:#6b523f; font-weight:700; }
.contract-card code {
  min-width:0;
  max-width:270px;
  padding:9px 11px;
  background:rgba(255,255,255,.54);
  border:1px solid rgba(65,55,43,.18);
  border-radius:3px;
  color:#243644;
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.contract-card button,
.final-links button {
  border:0;
  cursor:pointer;
}
.contract-card button {
  min-height:36px;
  padding:0 13px;
  background:#213342;
  border:1px solid rgba(255,255,255,.22);
  border-radius:3px;
  color:#f7efe1;
  font-size:10px;
  font-weight:800;
  letter-spacing:.16em;
  box-shadow:0 8px 16px rgba(24,25,22,.18);
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.contract-card button:hover {
  transform:translateY(-1px);
  background:#d6a058;
  color:#211b13;
  box-shadow:0 12px 22px rgba(24,25,22,.26);
}


.easel { position:absolute; left:18%; bottom:19%; width:125px; height:205px; z-index:2; }
.canvas-mini { position:absolute; width:98px; height:73px; left:10px; top:8px; border:7px solid #8a6f51; background:linear-gradient(#bac8cf 0 49%, #6f7a6b 49% 52%, #9f8f72 52%); box-shadow:0 2px 8px rgba(0,0,0,.16); }
.easel .leg { position:absolute; width:7px; height:145px; background:#765c42; top:62px; left:59px; transform-origin:top; }
.easel .a { transform:rotate(10deg); } .easel .b { transform:rotate(-12deg); } .easel .c { transform:rotate(0deg); height:135px; }

.split-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:40px; }
.split-heading h2, .studio-copy h2, .one-more-head h2, .lore h2 { font-family:var(--serif); font-weight:400; letter-spacing:-.04em; margin:0; font-size:clamp(48px, 7vw, 104px); line-height:.9; }
.split-heading > p { max-width:360px; margin:0; font-family:var(--serif); font-size:20px; font-style:italic; }



.same-line { padding:120px 0 140px; border-top:1px solid rgba(37,39,35,.24); background:#d6d0c3; }
.reveal-line { opacity:.25; transform:translateY(18px); transition:all .7s ease; }
.same-line.in-view .reveal-line { opacity:1; transform:none; }
.wall-grid { margin-top:80px; display:grid; grid-template-columns: 1.2fr .82fr 1fr; gap:34px 28px; align-items:start; }
.painting { margin:0; }
.painting:nth-child(2), .painting:nth-child(5) { margin-top:70px; }
.painting:nth-child(4) { margin-top:-8px; }
.painting > div { aspect-ratio:1.45/1; border:12px solid #4b4138; box-shadow:0 12px 26px rgba(31,29,25,.17); }
.painting figcaption, .gallery-piece figcaption { margin-top:10px; font-size:10px; letter-spacing:.16em; color:#55544e; }
.p1 > div { background:linear-gradient(#cadce5 0 50%, #455e67 50% 53%, #8aa5a6 53%); }
.p2 > div { background:linear-gradient(#efc39f 0 47%, #9d5f3a 47% 50%, #c88d56 50%); }
.p3 > div { background:linear-gradient(#cdd9cf 0 56%, #607060 56% 58%, #899765 58%); }
.p4 > div { background:linear-gradient(#b9b7b3 0 54%, #5b5b58 54% 57%, #777267 57%); }
.p5 > div { background:linear-gradient(#eeeeea 0 58%, #c3c4bd 58% 60%, #dad9d2 60%); }
.p6 > div { background:linear-gradient(#1c2a40 0 48%, #111a26 48% 51%, #28323e 51%); }

.gallery { padding:120px 0 90px; background:#e8e3d9; overflow:hidden; }
.gallery-intro { display:flex; align-items:flex-end; justify-content:space-between; gap:40px; }
.gallery-intro h2 { font-family:var(--serif); font-weight:400; font-size:clamp(46px, 6.7vw, 94px); line-height:.9; letter-spacing:-.04em; margin:0; }
.gallery-intro > p { max-width:330px; font-family:var(--serif); font-style:italic; font-size:18px; }
.gallery-track { display:flex; gap:44px; overflow-x:auto; padding:70px max(32px, calc((100vw - 1260px)/2)) 38px; scrollbar-width:thin; scrollbar-color:#888 transparent; cursor:grab; }
.gallery-track:active { cursor:grabbing; }
.gallery-piece { flex:0 0 auto; width:min(52vw, 650px); margin:0; }
.gallery-piece:nth-child(even) { width:min(38vw, 470px); margin-top:80px; }
.gallery-piece > div { aspect-ratio:1.7/1; border:14px solid #51463b; box-shadow:0 14px 30px rgba(39,35,29,.15); }
.gallery-piece > div.has-custom-art { background-color:#cad7dc; }
.gallery-piece.sea > div { background:linear-gradient(#c6dce5 0 52%, #51717b 52% 54%, #94afb1 54%); }
.gallery-piece.desert > div { background:linear-gradient(#e9b07f 0 43%, #9b5736 43% 46%, #d2965e 46%); }
.gallery-piece.field > div { background:linear-gradient(#ccd8cf 0 57%, #617666 57% 59%, #8b9b65 59%); }
.gallery-piece.city > div { background:linear-gradient(#aaa9ae 0 62%, #40444d 62% 65%, #66625f 65%); }
.gallery-piece.fog > div { background:linear-gradient(#f1f0eb 0 61%, #c7c7c1 61% 62.5%, #dad8d0 62.5%); }
.gallery-piece.night > div { background:linear-gradient(#20314d 0 49%, #0e1724 49% 51%, #252c35 51%); }
.gallery-piece.dusk > div { background:linear-gradient(#e8a893 0 52%, #875263 52% 55%, #443d55 55%); }

.studio { min-height:100svh; display:grid; grid-template-columns:1.55fr .85fr; background:#a79078; overflow:hidden; }
.studio-image { min-height:760px; position:relative; background:linear-gradient(120deg, #8d755f, #b59f87 54%, #89715b); }
.studio-image::after { content:""; position:absolute; left:0; right:0; top:54%; height:4px; background:#64503e; box-shadow:0 42px 0 rgba(84,65,49,.45), 0 -40px 0 rgba(84,65,49,.28); }
.studio-window { position:absolute; width:34%; aspect-ratio:1/1.25; left:9%; top:12%; border:18px solid #5c4b3c; background:linear-gradient(#c5d3d5 0 49%, #7b877a 49% 52%, #9b8f76 52%); box-shadow:0 16px 28px rgba(35,29,24,.24); }
.studio-table { position:absolute; left:36%; right:5%; bottom:24%; height:23px; background:#5b4938; transform:perspective(500px) rotateX(5deg); }
.studio-table::before, .studio-table::after { content:""; position:absolute; width:14px; height:180px; background:#574431; top:18px; }
.studio-table::before { left:7%; } .studio-table::after { right:8%; }
.stack { position:absolute; border:12px solid #554536; background:linear-gradient(#c7d0cc 0 52%, #5f695e 52% 55%, #8c8971 55%); box-shadow:0 8px 20px rgba(31,26,21,.22); }
.stack-a { width:30%; aspect-ratio:1.6/1; right:8%; top:14%; transform:rotate(2deg); }
.stack-b { width:27%; aspect-ratio:1.4/1; right:14%; top:35%; transform:rotate(-3deg); background:linear-gradient(#e4ad87 0 48%, #8c503a 48% 51%, #ae7653 51%); }
.brush-pot { position:absolute; width:54px; height:72px; left:57%; bottom:26%; background:#765b43; border-radius:4px 4px 12px 12px; }
.brush-pot::before { content:""; position:absolute; width:5px; height:100px; background:#3f3328; left:12px; top:-90px; box-shadow:12px 9px 0 #4a382a, 23px -6px 0 #604b38; transform:rotate(4deg); }
.loose-canvas { position:absolute; width:24%; aspect-ratio:1.8/1; border:10px solid #584738; background:linear-gradient(#c9d5db 0 50%, #586f73 50% 53%, #91a39c 53%); }
.loose-canvas.c1 { left:7%; bottom:8%; transform:rotate(-7deg); }
.loose-canvas.c2 { left:29%; bottom:6%; transform:rotate(4deg); background:linear-gradient(#e8d9cc 0 46%, #8f6758 46% 49%, #b79874 49%); }
.loose-canvas.c3 { right:5%; bottom:5%; transform:rotate(-2deg); background:linear-gradient(#c5c0bd 0 58%, #55565a 58% 61%, #827c6e 61%); }
.studio-copy { width:auto; margin:0; padding:120px 9% 70px 11%; align-self:center; color:#25231f; }
.studio-copy h2 { font-size:clamp(52px, 7vw, 98px); }
.studio-copy > p:not(.eyebrow):not(.hand-note) { font-family:var(--serif); font-size:24px; line-height:1.35; max-width:460px; }
.hand-note { font-family:"Segoe Print", "Bradley Hand", cursive; font-size:14px; line-height:1.7; opacity:.75; transform:rotate(-1.4deg); max-width:360px; }

.lore { padding:150px 0 170px; background:#d8d2c7; }
.lore-wrap { display:grid; grid-template-columns:.9fr 1.1fr; gap:70px; }
.lore-lines { align-self:end; padding-bottom:10px; }
.lore-lines p, .lore-lines strong { display:block; margin:0; padding:18px 0; border-bottom:1px solid rgba(37,39,35,.27); font-family:var(--serif); font-size:clamp(24px, 3vw, 43px); font-weight:400; opacity:.12; transform:translateY(20px); transition:all .6s ease; }
.lore-lines strong { border-bottom:0; margin-top:26px; font-size:clamp(30px, 4vw, 58px); }
.lore-lines .show { opacity:1; transform:none; }

.one-more { padding:120px 0 160px; background:#ede8de; }
.one-more-head { margin-bottom:60px; }
.one-more-scene { width:min(1180px, calc(100% - 64px)); margin:0 auto; height:620px; position:relative; background:linear-gradient(#c4c1ba, #a8a093 54%, #847968 54%); overflow:hidden; }
.blank-canvas { position:absolute; width:min(58%, 670px); aspect-ratio:1.55/1; left:50%; top:50%; transform:translate(-50%, -50%); border:20px solid #655441; background:#ece9df; box-shadow:0 16px 26px rgba(37,31,25,.22); overflow:hidden; }
.blank-canvas.has-custom-image {
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
}
.blank-canvas.has-custom-image > * {
  display:none;
}
.paint-sky, .paint-ground, .paint-line { position:absolute; left:0; right:0; opacity:0; transition:opacity .8s ease, transform .8s ease; }
.paint-sky { top:0; height:56%; background:#bcced4; transform:translateY(-8px); }
.paint-ground { bottom:0; height:44%; background:#8d846f; transform:translateY(8px); }
.paint-line { top:55.5%; height:3px; background:#3f443f; transform:scaleX(.1); transform-origin:center; }
.blank-canvas.stage-1 .paint-sky { opacity:1; transform:none; }
.blank-canvas.stage-2 .paint-ground { opacity:1; transform:none; }
.blank-canvas.stage-3 .paint-line { opacity:1; transform:scaleX(1); }

.finale { min-height:100svh; display:flex; align-items:center; justify-content:center; overflow:hidden; background:#b9cad1; }
.final-sky { position:absolute; inset:0 0 42% 0; background:linear-gradient(#afc2ca, #d7d9cf 73%, #ecd0af); }
.final-water { position:absolute; inset:58% 0 0; background:linear-gradient(#778b8d, #5c7070); }
.finale::before { content:""; position:absolute; left:0; right:0; top:58%; height:1px; background:#333a36; z-index:1; }
.finale.has-custom-image::before,
.finale.has-custom-image .final-sky,
.finale.has-custom-image .final-water {
  display:none;
}
.final-copy { text-align:center; margin-top:-4vh; }
.final-copy > p { letter-spacing:.21em; font-size:11px; margin:0 0 22px; }
.final-copy h2 { margin:0; font-family:var(--serif); font-weight:400; font-size:clamp(86px, 15vw, 230px); letter-spacing:-.07em; line-height:.78; }
.final-links {
  width:max-content;
  max-width:100%;
  margin:38px auto 0;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:9px;
  padding:7px;
  background:rgba(246,239,226,.82);
  border:1px solid rgba(65,55,43,.48);
  border-radius:4px;
  box-shadow:0 14px 34px rgba(24,25,22,.20), inset 0 1px 0 rgba(255,255,255,.70);
  backdrop-filter:blur(8px);
}
.final-links a,
.final-links button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:0 16px;
  background:rgba(33,51,66,.92);
  border:1px solid rgba(255,255,255,.24);
  border-radius:3px;
  color:#f7efe1;
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  box-shadow:0 8px 16px rgba(24,25,22,.18);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.final-links a[data-link="buy"] {
  background:#d6a058;
  border-color:rgba(255,247,225,.64);
  color:#211b13;
}
.final-links a:hover,
.final-links button:hover {
  transform:translateY(-1px);
  background:#263b4c;
  box-shadow:0 12px 22px rgba(24,25,22,.26);
}
.final-links a[data-link="buy"]:hover {
  background:#e2b46c;
}
.painted-counter { margin-top:88px; font-size:10px; letter-spacing:.18em; }

@media (max-width: 900px) {
  .shell { width:min(100% - 34px, 720px); }
  .hero-copy { grid-template-columns:1fr; grid-template-areas:"title" "actions"; padding-bottom:28px; }
  .hero-actions { width:100%; transform:none; align-items:flex-start; }
  .hero-title-wrap { padding-top:90px; }
  h1 { font-size:clamp(70px, 23vw, 150px); }
  .art-links { justify-content:flex-start; overflow-x:auto; }
  .art-links a { min-height:38px; padding:0 13px; }
  .contract-card { width:min(100%, 490px); grid-template-columns:auto minmax(0, 1fr) auto; }
  .contract-card code { max-width:none; }
  .easel { left:22%; bottom:31%; transform:scale(.78); transform-origin:bottom left; }
  .hero-sun { left:73%; }
  .split-heading, .gallery-intro { align-items:flex-start; flex-direction:column; }
  .one-more-scene { width:calc(100% - 34px); min-height:360px; height:72vw; }
  .wall-grid { grid-template-columns:1fr 1fr; gap:26px 18px; }
  .painting:nth-child(2), .painting:nth-child(5), .painting:nth-child(4) { margin-top:0; }
  .painting > div { border-width:8px; }
  .gallery-piece { width:78vw; }
  .gallery-piece:nth-child(even) { width:67vw; margin-top:42px; }
  .studio { grid-template-columns:1fr; }
  .studio-image { min-height:560px; }
  .studio-copy { padding:76px 24px 90px; }
  .lore-wrap { grid-template-columns:1fr; gap:45px; }
  .blank-canvas { width:70%; border-width:12px; }
}

@media (max-width: 560px) {
  .hero-sub { letter-spacing:.12em; }
  .art-links { gap:6px; width:100%; padding:6px; overflow-x:auto; }
  .art-links a { flex:0 0 auto; min-width:0; padding:0 10px; font-size:9px; letter-spacing:.10em; }
  .art-links a span { font-size:10px; margin-left:5px; letter-spacing:.06em; }
  .contract-card { grid-template-columns:1fr auto; gap:8px; }
  .contract-card .eyebrow { grid-column:1 / -1; }
  .contract-card code { font-size:11px; }
  .wall-grid { grid-template-columns:1fr; }
  .gallery-track { gap:24px; }
  .gallery-piece, .gallery-piece:nth-child(even) { width:84vw; margin-top:0; }
  .gallery-piece > div { border-width:9px; }
  .studio-image { min-height:470px; }
  .studio-window { border-width:11px; }
  .stack { border-width:8px; }
  .loose-canvas { border-width:7px; }
  .one-more-scene { min-height:340px; }
  .blank-canvas { width:76%; top:45%; }
  .final-links { gap:18px; }
  .painted-counter { margin-top:55px; }
}

/* When real artwork is assigned in scripts.js, built-in placeholders disappear. */
.hero-scene.has-custom-image > *,
.studio-image.has-custom-image > * {
  display: none;
}