/* COLOR STORY — a studio rail, offset artwork, tactile color, and editorial pacing. */
.painting { --ink: #493345; --paper: #fbf7ef; --action: #493345; --action-ink: #fff; --line: #d3c6cc; }
.painting-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); max-width: 1800px; margin: auto; }
.painting-rail { align-self: start; position: sticky; top: 0; padding: 38px 24px; min-height: min(850px, 100svh); display: flex; flex-direction: column; border-right: 1px solid var(--line); }
.painting-rail .business-logo img { width: 235px; }
.rail-caption { margin-top: 24px; font: italic 17px/1.5 Georgia,serif; }
.painting-rail nav { display: flex; flex-direction: column; gap: 8px; margin-top: 55px; }
.painting-rail nav a { display: flex; min-height: 44px; gap: 12px; align-items: center; font-size: 12px; text-decoration: none; }
.painting-rail nav span { font-size: 9px; }
.painting-rail nav a:hover { text-decoration: underline; }
.rail-estimate { display: flex; gap: 24px; align-items: center; justify-content: space-between; min-height: 48px; border-bottom: 1px solid var(--ink); margin-top: 25px; font-size: 13px; }
.rail-bottom { display: flex; justify-content: space-between; gap: 16px; margin-top: auto; padding-top: 60px; }
.rail-bottom > span { font-size: 8px; letter-spacing: .08em; line-height: 1.8; }
.rail-bottom p { font: italic 13px/1.5 Georgia,serif; }
.painting-layout main { min-width: 0; }
.painting .section { padding: 64px 50px; }
.painting h1, .painting h2 { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; }
.painting-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; align-items: center; padding: 48px 50px 55px; background: #f5e8e1; min-height: 700px; }
.painting-hero h1 { font-size: clamp(3.3rem, 5.5vw, 5.3rem); letter-spacing: -.055em; line-height: 1.01; margin: 24px -100px 26px 0; position: relative; z-index: 2; }
.painting-hero h1 em { display: block; font-weight: 400; color: #70434d; }
.painting-hero-copy { padding-block: 18px; }
.painting-hero-copy > p:not(.eyebrow) { max-width: 350px; font-size: 14px; }
.painting-hero .hero-actions { margin-top: 24px; }
.painting-hero .button { padding: 17px 20px; border-radius: 0 16px 0 16px; font-size: 12px; }
.painting-hero .painting-signoff { margin-top: 34px; font: italic 18px/1.5 Georgia,serif; }
.painting-art { position: relative; padding: 24px 0 24px 22px; }
.painting-art .hero-image { height: 460px; transform: rotate(3deg); background: #fff; padding: 10px 10px 0; box-shadow: 0 10px 24px #49334514; }
.painting-art .hero-image picture { height: calc(100% - 28px); }
.painting-art .hero-image img { object-position: center 56%; }
.painting-art figcaption { height: 28px; display: flex; align-items: center; justify-content: center; font-size: 7px; letter-spacing: .14em; color: var(--ink); }
.paint-note { position: absolute; top: -20px; right: -10px; z-index: 3; width: 118px; height: 118px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; background: #c49449; color: #362631; transform: rotate(12deg); }
.paint-note > span { font: italic 13px Georgia,serif; }
.paint-note strong { font: 25px/.94 Georgia,serif; margin-top: 6px; text-align: center; }
.paint-chips { position: absolute; bottom: -4px; left: -5px; display: flex; transform: rotate(-8deg); border: 6px solid #fff; box-shadow: 0 8px 20px #49334514; }
.paint-chips span { width: 54px; height: 75px; background: #c98777; }
.paint-chips span:nth-child(2) { background: #c49449; }
.paint-chips span:nth-child(3) { background: #493345; }
.painting-section-title { display: flex; align-items: start; justify-content: space-between; gap: 24px; margin-bottom: 38px; }
.painting-section-title h2 { font-size: 3.5rem; }
.finish-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: start; gap: 18px; }
.finish-grid article { padding: 30px 24px; min-height: 320px; background: #e4c9bc; border-radius: 0 0 70px 0; }
.finish-grid article:nth-child(2) { margin-top: 38px; background: #d5e0db; }
.finish-grid article:nth-child(3) { margin-top: 76px; background: #e6d2a8; }
.finish-number { font: italic 38px Georgia,serif; display: block; margin-bottom: 28px; }
.finish-grid h3 { font: 26px/1.05 Georgia,serif; letter-spacing: -.03em; margin-bottom: 16px; }
.finish-grid p { font-size: 13px; line-height: 1.85; }
.finish-grid .text-link { font-size: 12px; margin-top: 15px; }
.color-studio { display: grid; grid-template-columns: 1fr 1fr; gap: 38px; align-items: center; background: #ede9f0; }
.color-studio h2 { margin: 20px 0; }
.color-studio > div > p:not(.eyebrow) { font-size: 14px; }
.color-controls { display: none; flex-wrap: wrap; gap: 10px; margin: 22px 0; }
.js .color-controls { display: flex; }
.color-controls button { background: transparent; color: var(--ink); border: 1px solid #49334566; min-height: 44px; padding: 8px 10px; display: flex; gap: 8px; align-items: center; font-size: 11px; }
.color-controls button span { display: block; width: 18px; height: 18px; border-radius: 50%; }
.color-controls button[aria-pressed="true"] { border: 2px solid var(--ink); padding: 7px 9px; background: #fff9; }
.study-caption { font-size: 11px !important; line-height: 1.6; }
.color-vignette { height: 350px; background: #e5c2b5; position: relative; overflow: hidden; border-radius: 120px 120px 0 0; transition: background-color .3s; box-shadow: inset -30px 0 50px #4933450c; }
.vignette-window { position: absolute; width: 170px; height: 250px; left: -35px; top: 20px; transform: skewY(-18deg); background: linear-gradient(90deg,transparent 47%,#fff6 47%,#fff6 51%,transparent 51%),linear-gradient(0deg,#fff4 47%,transparent 47%,transparent 51%,#fff4 51%); }
.vignette-frame { position: absolute; top: 75px; left: 45%; padding: 10px; width: 110px; height: 145px; background: #eee2cf; box-shadow: 3px 4px 0 #49334533; }
.vignette-frame span { display: grid; place-content: center; height: 100%; border: 1px solid #cbb797; background: #fff9ed; font: italic 22px Georgia,serif; }
.vignette-table { position: absolute; width: 78%; left: 11%; bottom: 62px; height: 12px; background: #725444; border-radius: 5px; box-shadow: 0 4px 5px #49334525; }
.vignette-table::before, .vignette-table::after { content: ''; position: absolute; top: 12px; height: 80px; width: 9px; background: #725444; left: 10%; }
.vignette-table::after { left: auto; right: 10%; }
.vignette-label { position: absolute; bottom: 13px; left: 0; right: 0; font-size: 7px; letter-spacing: .08em; text-align: center; }
.painting-method { display: grid; grid-template-columns: .9fr 1fr; gap: 48px; }
.painting-method figure { padding-top: 18px; }
.painting-method picture { height: 520px; border-radius: 0 90px 0 0; overflow: hidden; }
.painting-method figcaption { font-size: 9px; margin-top: 12px; }
.painting-method h2 { margin: 20px 0; }
.painting-method p { font-size: 14px; }
.painting-method ol { list-style: decimal-leading-zero; padding-left: 25px; margin-top: 25px; }
.painting-method li { padding: 18px 0 18px 10px; border-top: 1px solid var(--line); }
.painting-method h3 { font: 23px Georgia,serif; margin-bottom: 10px; }
.painting-area { display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; border-top: 1px solid var(--line); }
.painting-area > div:first-child h2 { font-size: 2.7rem; margin: 18px 0; }
.painting-area p { font-size: 14px; }
.painting .estimate { background: var(--ink); color: var(--paper); gap: 35px; }
.painting .estimate h2 { font-style: italic; font-size: 3.4rem; }
.painting .estimate .button { background: #e6d2a8; color: #362631; }
.painting .site-footer { border-top: 1px solid var(--line); }
@media (max-width: 1200px) {
  .painting-layout { grid-template-columns: 185px minmax(0, 1fr); }
  .painting-rail { padding: 28px 18px; }
  .painting .section { padding: 48px 30px; }
  .painting-hero { padding: 38px 30px; min-height: 650px; }
  .painting-hero h1 { font-size: 4.5rem; margin-right: -45px; }
  .painting-art .hero-image { height: 430px; }
  .paint-note { width: 90px; height: 90px; right: -5px; }
  .paint-note strong { font-size: 21px; }
  .paint-chips span { width: 40px; height: 58px; }
  .finish-grid { gap: 12px; }
  .finish-grid article { padding: 25px 18px; }
}
@media (max-width: 980px) {
  .painting-layout { grid-template-columns: 1fr; }
  .painting-rail { position: static; min-height: 0; padding: 16px 24px; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; border-right: 0; }
  .painting-rail .business-logo img { width: 245px; }
  .painting-rail nav { flex-direction: row; justify-content: space-between; order: 3; flex-basis: 100%; margin-top: 14px; border-top: 1px solid var(--line); padding-top: 8px; }
  .painting-rail nav a { font-size: 10px; gap: 6px; }
  .rail-estimate { margin-top: 0; }
  .rail-caption, .rail-bottom { display: none; }
  .painting-hero { min-height: 580px; }
  .painting-hero h1 { font-size: 4.7rem; }
}
@media (max-width: 760px) {
  .painting .section { padding: 48px 24px; }
  .painting-hero { grid-template-columns: 1fr; gap: 16px; padding: 28px 24px 45px; }
  .painting-hero h1 { margin-right: 0; font-size: clamp(3.3rem, 11vw, 4.8rem); }
  .painting-hero-copy { padding-top: 0; }
  .painting-hero-copy > p:not(.eyebrow) { max-width: 600px; }
  .painting-hero .painting-signoff { margin-top: 24px; }
  .painting-art { max-width: 480px; width: 100%; padding: 16px 14px 16px 28px; margin: 16px auto 0; }
  .painting-art .hero-image { height: 385px; }
  .paint-note { right: 5px; top: -12px; }
  .paint-chips { left: 4px; }
  .painting-section-title { display: block; }
  .painting-section-title h2 { margin-top: 18px; font-size: 2.8rem; }
  .finish-grid { grid-template-columns: 1fr; gap: 16px; }
  .finish-grid article, .finish-grid article:nth-child(2), .finish-grid article:nth-child(3) { margin: 0; padding: 28px; min-height: 0; border-radius: 0 0 50px 0; }
  .finish-number { margin-bottom: 12px; }
  .finish-grid article:nth-child(2) { margin-left: 24px; }
  .finish-grid article:nth-child(3) { margin-right: 24px; }
  .color-studio, .painting-method, .painting-area { grid-template-columns: 1fr; gap: 30px; }
  .color-vignette { height: 330px; max-width: 430px; width: 100%; margin: auto; }
  .painting-method picture { height: 340px; }
  .painting .estimate h2 { font-size: 2.8rem; }
}
@media (max-width: 420px) {
  .painting-rail .business-logo img { width: 195px; }
  .rail-estimate { max-width: 98px; font-size: 11px; gap: 10px; }
  .painting-rail nav a { gap: 4px; font-size: 9px; }
  .painting-rail nav span { display: none; }
}