/* Phase 6: continuous paper, deliberate edge zones and section-specific rhythm. */
:root { --section-gutter: max(15vw, calc((100vw - 1180px) / 2)); }
.section, footer {
  position: relative;
  isolation: isolate;
  padding-inline: var(--section-gutter);
}
.section { padding-block: clamp(3rem,5vw,5rem); }
.section :is(.section-heading > .eyebrow, .eyebrow) { margin-bottom: 1.25rem; }
.work, .artist, .process, .faq { background: transparent; }
html { overflow-x: clip; }
body { background-color: var(--parchment); background-image: linear-gradient(rgba(246,241,231,.68),rgba(246,241,231,.68)),url("assets/art-direction/header/sanguine-artz-header-background@1x.webp"); background-size: auto,400% auto; background-position: 0 0,center top; background-repeat: no-repeat,repeat-y; }
main { background: transparent; }
.occasions { background: radial-gradient(ellipse at 48% 50%,var(--cream) 45%,transparent 78%); }
.section-art .art-paint { z-index: var(--layer-wash); opacity: calc(var(--paint-opacity-base,1) * var(--motion-opacity,1)); }
.section-art .art-leaf { z-index: var(--layer-botanical); }
.section h2 { font-size: clamp(2.5rem,4.1vw,4.125rem); }
.section-art {
  position: absolute;
  inset: 0;
  z-index: var(--layer-botanical);
  overflow: visible;
  pointer-events: none;
  user-select: none;
}
.art-layer {
  --layer-width: clamp(8rem,14vw,14rem);
  position: absolute;
  display: block;
  width: var(--layer-width);
  height: auto;
  max-width: none;
  pointer-events: none;
}
/* Keep the inner edge of every side decoration outside the content column. */
.art-left { left: calc(var(--section-gutter) - var(--layer-width) - 1.25rem); }
.art-right { right: calc(var(--section-gutter) - var(--layer-width) - 1.25rem); }
.section .illustrated-title {
  display: grid;
  grid-template-columns: minmax(0,1fr) 30%;
  align-items: end;
  gap: 1rem;
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0;
}
.section .illustrated-title h2 { grid-column: 1; grid-row: 1; margin: 0; }
.title-fox {
  display: block;
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  height: auto;
  max-width: 100%;
  align-self: end;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

/* The work: a seated companion, a tall left branch and a light painted edge. */
.work { row-gap: 2rem; align-items: end; padding-top: clamp(3rem,4.5vw,5rem); }
.work-content { padding-top: 0; align-self: end; }
.work-content .lead { font-size: 1.1875rem; }
.work-content p:last-child { margin-bottom: 0; }
.work-grid { gap: 1.25rem 1.1rem; }
.work .illustrated-title { grid-template-columns: minmax(0,1fr) 36%; }
.work .title-fox { width: 112%; max-width: 112%; height: clamp(135px,13vw,185px); margin-left: -.5rem; }
.work .embed-note { margin: 0; max-width: 40rem; line-height: 1.65; }
.art-open { padding: clamp(7px,.8vw,12px); aspect-ratio: 4 / 4.35; border-color: rgba(251,247,240,.9); background: rgba(220,208,192,.48); box-shadow: 0 0 0 1px rgba(162,132,110,.1); }
.work-card figcaption { padding-block: .7rem .75rem; min-height: 2.7rem; font-size: .75rem; gap: .65rem; border-color: rgba(162,132,110,.3); }
.work-card small { font-size: .625rem; padding-top: .1rem; }
.paint-work-left { --layer-width: clamp(12rem,22vw,22rem); top: 34%; --paint-opacity-base: .8; }
.paint-work-wisp { width: min(44vw,650px); top: -2.5rem; right: -1rem; --paint-opacity-base: .65; }
.leaf-work-left { --layer-width: clamp(7rem,13vw,12rem); top: 1rem; }
.leaf-work-right { --layer-width: clamp(6rem,10vw,10rem); top: 3rem; }

/* Commission themes use the full transparent characters, without cropping. */
.occasions .title-fox { height: clamp(105px,11vw,160px); }
.occasions { padding-block: clamp(3rem,4vw,4.5rem); }
.occasions .illustrated-title { grid-template-columns: minmax(0,1fr) 32%; gap: 2rem; }
.occasion-grid { margin-top: 1.25rem; }
.occasion-grid > a { padding: 1.25rem 1.75rem .5rem 0; border-top-color: rgba(162,132,110,.3); }
.occasion-grid > a + a { border-left-color: rgba(162,132,110,.22); }
.occasion-grid p { font-size: .875rem; line-height: 1.65; margin-bottom: 1.25rem; }
.occasion-grid h3 { font-size: clamp(1.5rem,2.15vw,2rem); }
.occasions .theme-thumb {
  height: clamp(195px,17vw,245px);
  margin-bottom: 1rem;
  isolation: isolate;
  overflow: visible;
  mix-blend-mode: normal;
}
.occasions .theme-thumb .commission-fox {
  position: relative;
  inset: auto;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  object-position: center bottom;
}
/* Distinct silhouettes share a baseline; keep the quieter seated pose intimate. */
.occasions .theme-0 .commission-fox { width: 94%; margin-inline: auto; }
.occasions .theme-1 .commission-fox { object-position: center bottom; }
.occasions .theme-2 .commission-fox { width: 96%; margin-inline: auto; }
.occasions .theme-thumb .theme-wash {
  position: absolute;
  inset: 8% 4% 0;
  z-index: 0;
  width: 92%;
  height: 88%;
  max-width: none;
  object-fit: contain;
  opacity: .82;
  mix-blend-mode: multiply;
  transform: rotate(-14deg);
  pointer-events: none;
}
.occasions .theme-1 .theme-wash { transform: rotate(14deg); }
.occasions .theme-2 .theme-wash { transform: rotate(28deg); }
.occasion-grid .number { margin-bottom: .65rem; }
.occasion-grid h3 { margin-bottom: .7rem; }
.occasion-grid .text-link { margin-top: auto; }
.occasions > .small { margin-top: 1.5rem; }
.occasions > .small + .small { margin-top: .25rem; }
.paint-commission-left { --layer-width: clamp(17rem,28vw,30rem); left: calc(-.25 * var(--layer-width)); top: -2.5rem; }
.paint-commission-right { --layer-width: clamp(20rem,40vw,44rem); right: calc(-.18 * var(--layer-width)); bottom: -4.5rem; }
.leaf-commission-upper { --layer-width: clamp(8rem,15vw,14rem); top: -1.5rem; }
.leaf-commission-lower { --layer-width: clamp(7rem,13vw,13rem); bottom: 2rem; }
.leaf-commission-flourish { --layer-width: clamp(10rem,19vw,19rem); bottom: -3rem; }

/* The artist's own portrait stays central, surrounded by soft paper and leaves. */
.artist { border-bottom: 0; padding-block: clamp(3rem,4vw,4.5rem); grid-template-columns: 1.2fr 1fr; column-gap: 10%; }
.artist .illustrated-title, .inquiry .illustrated-title { display: block; }
.artist-photo { margin-top: 2rem; }
.artist-photo img { border: 1px solid rgba(162,132,110,.25); aspect-ratio: 3 / 4; object-fit: contain; object-position: center; }
.artist-photo figcaption { margin-top: .6rem; font-size: .6875rem; }
.artist > div:last-child { align-self: center; padding-top: 0; }
.artist-avatar { width: 64px; height: 64px; margin-bottom: 1.25rem; }
.artist .lead { font-size: 1.1875rem; }
.paint-artist-left { --layer-width: clamp(12rem,21vw,21rem); bottom: 1rem; --paint-opacity-base: .48; }
.paint-artist-right { --layer-width: clamp(13rem,24vw,25rem); top: -2rem; --paint-opacity-base: .7; }
.leaf-artist-left { --layer-width: clamp(6rem,11vw,11rem); top: 15%; opacity: .9; scale: -1 1; rotate: -8deg; }
.leaf-artist-right { --layer-width: clamp(9rem,18vw,20rem); bottom: -2rem; }

/* Starting a commission: the sprig sits in the space between title and fox. */
.process .illustrated-title { grid-template-columns: minmax(0,1fr) 28%; }
.process .title-fox { width: clamp(110px,10vw,145px); justify-self: start; }
.title-sprig {
  position: absolute;
  right: calc(28% + 1rem);
  bottom: .25rem;
  width: clamp(80px,10vw,145px);
  height: auto;
  pointer-events: none;
  user-select: none;
}
.process .illustrated-title h2 { max-width: calc(100% - clamp(80px,10vw,145px)); }
.process { padding-top: 2.5rem; padding-bottom: 3rem; }
.process h2 { font-size: clamp(2.5rem,3.6vw,3.5rem); }
.steps { margin-top: 1.25rem; gap: 1.75rem; }
.steps p { font-size: .8125rem; line-height: 1.65; margin: 0; }
.steps article { padding-top: 0; border-top: 0; }
.steps .number { margin-bottom: .4rem; }
.steps h3 { font-size: clamp(1.375rem,1.8vw,1.625rem); margin-bottom: .5rem; }
.step-thumb { height: clamp(105px,9vw,135px); margin-bottom: .8rem; }
.paint-process-transition { width: 100%; top: -9vw; left: 0; --paint-opacity-base: .55; }
.leaf-process-left { --layer-width: clamp(8rem,14vw,14rem); top: 25%; }

/* The portrait scene shares the paper; the fox has a reserved lower-left zone. */
.inquiry { padding-block: clamp(3rem,4vw,4.5rem); gap: 8%; background: linear-gradient(180deg,var(--parchment),#edd8bf 10%,#edd8bf 90%,var(--parchment)); }
.inquiry > div:not(.section-art) { position: relative; z-index: var(--layer-content); padding-bottom: 9rem; }
.inquiry form { position: relative; z-index: var(--layer-content); }
.inquiry label { margin-bottom: .8rem; font-size: .75rem; }
.inquiry :is(input,select,textarea) { min-height: 44px; padding: .5rem .75rem; background: rgba(251,247,240,.76); border-color: rgba(115,80,65,.46); box-shadow: inset 0 1px 3px rgba(85,28,43,.04); transition: border-color var(--motion-subtle),background var(--motion-subtle); }
.inquiry :is(input,select,textarea):hover { border-color: var(--rust); }
.inquiry :is(input,select,textarea):focus { background: var(--cream); }
.inquiry .form-row { gap: 1rem; }
.inquiry .button { min-height: 52px; padding: .75rem 1rem; }
.inquiry .small { margin-top: 1.25rem; }
.inquiry .illustrated-title { margin-bottom: 1.25rem; }
.inquiry .illustrated-title h2 { margin-bottom: 0; }
.inquiry h2 { font-size: clamp(3.5rem,6vw,5.375rem); }
.inquiry-fox {
  position: absolute;
  bottom: 0;
  left: max(0px,calc(var(--section-gutter) - 12rem));
  z-index: 0;
  display: block;
  width: clamp(230px,24vw,360px);
  height: auto;
  pointer-events: none;
  user-select: none;
}
.paint-inquiry-cloud { inset: 0; width: 100%; height: 100%; object-fit: cover; --paint-opacity-base: .62; }
.leaf-inquiry-left { --layer-width: clamp(9rem,16vw,16rem); bottom: 0; opacity: .8; }

/* The FAQ sprig has its own space below the heading. */
.faq { padding-top: 2.5rem; padding-bottom: 2.25rem; align-items: start; }
.faq-heading { position: relative; min-height: 12rem; }
.faq summary { padding-block: 1rem; font-size: .875rem; }
.faq summary::before { top: 1rem; }
.faq details { border-color: rgba(162,132,110,.32); }
.faq details p { font-size: .875rem; line-height: 1.7; }
.faq h2 { font-size: clamp(2.375rem,3.4vw,3rem); }
.faq-sprig {
  display: block;
  width: clamp(100px,11vw,150px);
  height: auto;
  margin: -2.5rem 0 0 auto;
  pointer-events: none;
  user-select: none;
}
.paint-faq-left { --layer-width: clamp(14rem,24vw,26rem); bottom: -4.5rem; }
.paint-faq-right { --layer-width: clamp(12rem,21vw,23rem); bottom: -4rem; }
.leaf-faq-right { --layer-width: clamp(9rem,17vw,17rem); top: 0; }
.leaf-footer-left { --layer-width: clamp(8rem,14vw,13rem); bottom: 4rem; opacity: .95; }


/* Extra foliage frames the content; clearance allows the stronger motion. */
:root { --leaf-clearance: clamp(3rem,4.4vw,5.25rem); }
.section-art .art-leaf.art-left { left: calc(var(--section-gutter) - var(--layer-width) - var(--leaf-clearance)); }
.section-art .art-leaf.art-right { right: calc(var(--section-gutter) - var(--layer-width) - var(--leaf-clearance)); }
.hero .hero-botanicals { z-index: var(--layer-foreground); overflow: clip; }
.hero-botanicals .art-leaf { --layer-width: clamp(145px,18vw,300px); opacity: .85; }
.hero .hero-botanicals .leaf-hero-left { left: calc(-.58 * var(--layer-width)); bottom: 12%; rotate: -18deg; }
.hero .hero-botanicals .leaf-hero-right { right: calc(-.58 * var(--layer-width)); top: 16%; scale: -1 1; rotate: 16deg; }
.leaf-work-transition { --layer-width: clamp(7rem,12vw,12rem); bottom: -3rem; rotate: -22deg; scale: -1 1; opacity: .84; }
.leaf-artist-upper { --layer-width: clamp(6rem,10vw,10rem); top: 2%; rotate: 22deg; opacity: .72; }
.leaf-process-right { --layer-width: clamp(8rem,15vw,16rem); top: 24%; scale: -1 1; rotate: -15deg; opacity: .82; }
.leaf-inquiry-right { --layer-width: clamp(6rem,11vw,12rem); top: 3%; scale: -1 1; rotate: 8deg; opacity: .8; }
.leaf-footer-right { --layer-width: clamp(8rem,15vw,16rem); bottom: 3.5rem; scale: -1 1; rotate: -26deg; opacity: .85; }

/* Additional botanical accents alternate height, silhouette and depth. */
.leaf-work-lower { --layer-width: clamp(8rem,14vw,14rem); bottom: -2rem; rotate: 17deg; opacity: .88; }
.leaf-work-middle { --layer-width: clamp(6rem,10vw,10rem); top: 44%; rotate: -12deg; opacity: .65; }
.leaf-commission-left-upper { --layer-width: clamp(6rem,11vw,11rem); top: 2%; rotate: -15deg; opacity: .8; }
.leaf-artist-lower { --layer-width: clamp(8rem,14vw,14rem); bottom: -2rem; rotate: 24deg; opacity: .78; }
.leaf-process-upper { --layer-width: clamp(6rem,10vw,10rem); top: -3rem; rotate: -22deg; opacity: .7; }
.leaf-inquiry-lower { --layer-width: clamp(9rem,17vw,18rem); bottom: -1rem; scale: -1 1; rotate: 17deg; opacity: .86; }
.leaf-faq-left { --layer-width: clamp(7rem,12vw,12rem); top: .5rem; scale: -1 1; rotate: 12deg; opacity: .72; }
.leaf-footer-upper { --layer-width: clamp(7rem,12vw,12rem); top: -2rem; rotate: 18deg; opacity: .84; }

@media (min-width: 761px) and (max-width: 1100px) {
  :root { --section-gutter: 8vw; }
  .paint-commission-left { --layer-width: 210px; left: -105px; }
  .paint-commission-right { --layer-width: 360px; right: -165px; bottom: -3rem; }
  .section .illustrated-title { column-gap: .75rem; }
  .process .illustrated-title h2 { max-width: 100%; }
  .title-sprig { display: none; }
  .inquiry { column-gap: 7%; }
  .inquiry-fox { width: 245px; left: 0; }
  .occasion-grid > a { padding-right: 1.25rem; }
  .occasion-grid > a + a { padding-left: 1.25rem; }
}
@media (max-width: 760px) {
  :root { --section-gutter: 6vw; }
  .section { padding-block: 3rem; }
  .artist { grid-template-columns: 1fr; }
  .section-art .art-leaf { --layer-width: clamp(90px,25vw,150px); opacity: .7; }
  .section-art .art-leaf.art-left { left: calc(-.76 * var(--layer-width)); }
  .section-art .art-leaf.art-right { right: calc(-.76 * var(--layer-width)); }
  .leaf-commission-lower, .leaf-commission-flourish { visibility: hidden; }
  .art-left { left: calc(var(--section-gutter) - var(--layer-width) - .5rem); }
  .art-right { right: calc(var(--section-gutter) - var(--layer-width) - .5rem); }
  .section-art .art-paint { --paint-opacity-base: .45; }
  .section-art .paint-inquiry-cloud { --paint-opacity-base: .62; }
  .section .illustrated-title { gap: .75rem; }
  .work { row-gap: 1.75rem; }
  .work-content .lead, .artist .lead { font-size: 1.125rem; }
  .work-grid { gap: 1rem .875rem; }
  .work-card figcaption { font-size: .6875rem; gap: .4rem; }
  .work .title-fox { max-width: 100%; width: 100%; margin: 0; }
  .paint-work-wisp { width: 70vw; top: -4rem; }
  .occasions .illustrated-title { grid-template-columns: minmax(0,1fr); gap: .5rem; }
  .occasions .title-fox { grid-column: 1; grid-row: 2; width: min(58%,230px); justify-self: end; }
  .occasion-grid { margin-top: 1.5rem; }
  .occasions .theme-thumb { height: clamp(220px,64vw,280px); max-width: 360px; margin: 0 auto 1.5rem; }
  .occasion-grid > a { padding-top: 1.5rem; padding-bottom: 1.75rem; }
  .artist { row-gap: 2rem; }
  .artist-avatar { width: 56px; height: 56px; }
  .process .illustrated-title { grid-template-columns: minmax(0,1fr) 28%; }
  .process .illustrated-title h2 { max-width: 100%; }
  .process .title-fox { width: 100%; }
  .title-sprig { display: none; }
  .steps { gap: 2rem; }
  .step-thumb { height: auto; aspect-ratio: 2 / 1; }
  .inquiry { row-gap: 2rem; }
  .inquiry-fox { position: static; grid-column: 1; grid-row: 3; width: min(45%,180px); margin: -.5rem 0 -2rem; }
  .faq { row-gap: 2rem; }
  .faq-heading { display: grid; grid-template-columns: minmax(0,1fr) 5rem; column-gap: .75rem; align-items: end; }
  .faq-heading .eyebrow { grid-column: 1 / -1; margin-bottom: 1rem; }
  .faq-heading h2 { grid-column: 1; grid-row: 2; }
  .faq-sprig { grid-column: 2; grid-row: 2; width: 100%; margin: 0; }
}

/* Foreground zones remain outside reading and touch targets. */
@media (min-width:761px) {
  .artist > div:last-child { padding-top: 4rem; }
  .work .section-heading > .eyebrow { margin-bottom: .7rem; }
  .faq-sprig { max-width: 38%; }
}
@media (max-width:760px) {
  .inquiry > div:not(.section-art) { padding-bottom: 0; }
  .inquiry-fox { position: static; grid-column: 1; grid-row: 3; width: min(74%,280px); margin: -.25rem 0 -3rem -1rem; }
  .inquiry { row-gap: 1.5rem; }
  .inquiry .form-row { gap: 0; }
  .inquiry form { padding: 0; }
  .faq-heading { min-height: 0; }
  .faq-sprig { margin: 0; width: min(25vw,100px); }
  .faq details p { margin-left: 1.75rem; }
  .section-art .paint-commission-right { bottom: -2rem; --paint-opacity-base: .55; }
  .steps { gap: 1.5rem; }
  .steps article { position: relative; padding-bottom: 1.5rem; border-bottom: 1px solid rgba(162,132,110,.28); }
  .steps article:last-child { border: 0; padding-bottom: 0; }
  .step-thumb { height: clamp(125px,38vw,190px); }
  .process .title-sprig { display: block; width: 60px; right: 25%; bottom: -.25rem; opacity: .7; }
}

@media (max-width:760px) {
  .hero .hero-botanicals { mask-image: linear-gradient(90deg,#000,transparent 5%,transparent 95%,#000); }
  .hero .hero-botanicals .art-leaf { --layer-width: 140px; opacity: .65; }
  .hero .hero-botanicals .leaf-hero-left { left: -100px; bottom: 10%; }
  .hero .hero-botanicals .leaf-hero-right { right: -100px; top: 32%; }
  .section-art :is(.leaf-work-transition,.leaf-artist-upper,.leaf-process-right,.leaf-inquiry-right,.leaf-footer-right) { opacity: .56; }
  .leaf-work-transition { bottom: -.5rem; }
  .leaf-process-right { top: 46%; }
  .leaf-inquiry-right { top: 35%; }
}

@media (max-width:760px) {
  .section-art :is(.leaf-work-lower,.leaf-work-middle,.leaf-commission-left-upper,.leaf-artist-lower,.leaf-process-upper,.leaf-inquiry-lower,.leaf-faq-left,.leaf-footer-upper) { opacity: .58; }
  .leaf-work-middle { top: 47%; }
  .leaf-process-upper { top: -.5rem; }
  .leaf-inquiry-lower { bottom: 24%; }
  .leaf-faq-left { top: 38%; }
  .leaf-footer-upper { top: -1rem; }
}

/* Fox silhouettes echo the Hero, touching the heading from underneath. */
.section .illustrated-title:has(.title-fox) {
  position: relative; display: block; isolation: isolate;
  width: fit-content; max-width: 100%; padding-right: clamp(2rem,4vw,4rem);
}
.section .illustrated-title:has(.title-fox) h2 {
  position: relative; z-index: 1; max-width: 100%;
}
.section .illustrated-title .title-fox {
  position: absolute; z-index: 0; opacity: .34; margin: 0;
  height: auto; max-width: none; width: clamp(120px,13vw,190px);
  right: -1.5rem; bottom: -.35rem; object-fit: contain;
}
.occasions .illustrated-title .title-fox {
  scale: -1 1;
  width: clamp(195px,23vw,340px); right: -7rem; bottom: -.6rem;
}
.process .illustrated-title .title-fox {
  width: clamp(120px,12vw,175px); right: -1.5rem; bottom: -.25rem;
}
.process .illustrated-title .title-sprig {
  right: -5.5rem; bottom: -1rem; width: 95px; opacity: .4; z-index: 0;
}
/* The three steps share a painted setting and full character silhouettes. */
.steps { margin-top: 2rem; gap: clamp(1.5rem,3vw,3rem); }
.steps article { position: relative; isolation: isolate; }
.steps article::before {
  content: ''; position: absolute; z-index: -1; top: 1.75rem;
  left: 0; width: 100%; height: clamp(170px,16vw,230px);
  background: url("assets/art-direction/paint/05-the-work-left-circular-wash.webp") center / contain no-repeat;
  opacity: .36; pointer-events: none;
}
.steps article:nth-child(2)::before { rotate: 18deg; opacity: .26; }
.steps article:nth-child(3)::before { rotate: -14deg; }
.steps .process-illustration {
  display: block; width: 100%; height: clamp(215px,20vw,285px);
  aspect-ratio: auto; object-fit: contain; object-position: center bottom;
  background: transparent; margin: 0 0 1.3rem;
}
/* Paint remains one continuous surface through the quiet final dedication. */
footer {
  box-shadow: none;
  margin-top: -1px; padding-bottom: .75rem;
}
.footer-dedication {
  position: relative; z-index: var(--layer-content);
  margin: 2.5rem 0 0; padding: 0; text-align: center;
  color: #d9bdaf; font-size: .625rem; line-height: 1.6; letter-spacing: .02em;
}
@media (max-width:760px) {
  .section .illustrated-title:has(.title-fox) { padding-right: 1rem; }
  .section .illustrated-title .title-fox { width: 125px; right: -.25rem; bottom: -.5rem; opacity: .28; }
  .occasions .illustrated-title .title-fox { width: 185px; right: 0; bottom: -.9rem; }
  .process .illustrated-title .title-fox { width: 125px; right: 0; }
  .process .illustrated-title .title-sprig { right: -.25rem; width: 60px; opacity: .3; }
  .steps .process-illustration { height: 255px; margin-bottom: 1rem; }
  .steps article::before { height: 215px; }
  footer { padding-bottom: .65rem; }
  .footer-dedication { margin-top: 2rem; font-size: .625rem; }
}