/*
 * Optional art directions used by variation-botanical.html and
 * variation-studio.html. The baseline index remains unchanged.
 */

.line-flourish { display: none; pointer-events: none; }

/* Variation 01 — Botanical linework */

html[data-variation="botanical"] {
  --cream: #f7f2e9;
  --paper: #fffdf8;
  --blush: #ded8ca;
  --rose: #a96e62;
  --plum: #48564b;
  --sage: #aab7a2;
  --ink: #28332b;
  --muted: #637066;
}

html[data-variation="botanical"] .hero {
  background:
    radial-gradient(circle at 72% 30%, rgba(170, 183, 162, .28), transparent 27%),
    linear-gradient(108deg, #f7f2e9 0 61%, #e5e6da 61% 100%);
}

html[data-variation="botanical"] .portrait-frame {
  border-radius: 50% 50% 44% 44% / 35% 35% 16% 16%;
  filter: saturate(.82) sepia(.06);
}

html[data-variation="botanical"] .photo-note {
  border: 1px solid rgba(72, 86, 75, .22);
  box-shadow: 8px 9px 0 rgba(170, 183, 162, .32);
}

html[data-variation="botanical"] .approach {
  background:
    linear-gradient(rgba(72,86,75,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(72,86,75,.045) 1px, transparent 1px),
    var(--cream);
  background-size: 42px 42px;
}

html[data-variation="botanical"] .card { background: rgba(255, 253, 248, .68); }
html[data-variation="botanical"] .quote-break { background: #48564b; }
html[data-variation="botanical"] .contact { background: #e5e6da; }

html[data-variation="botanical"] .line-flourish {
  position: absolute;
  z-index: 1;
  display: block;
  width: 170px;
  height: 260px;
  border-left: 1px solid rgba(72, 86, 75, .5);
  border-radius: 50%;
  transform: rotate(22deg);
}

html[data-variation="botanical"] .line-flourish::before,
html[data-variation="botanical"] .line-flourish::after {
  content: "";
  position: absolute;
  width: 74px;
  height: 33px;
  border: 1px solid rgba(72, 86, 75, .5);
  border-radius: 100% 0 100% 0;
}

html[data-variation="botanical"] .line-flourish::before { top: 44px; left: -11px; transform: rotate(-21deg); }
html[data-variation="botanical"] .line-flourish::after { top: 135px; left: -64px; transform: rotate(24deg) scaleX(-1); }

html[data-variation="botanical"] .line-flourish i,
html[data-variation="botanical"] .line-flourish b {
  position: absolute;
  display: block;
  width: 54px;
  height: 23px;
  border: 1px solid rgba(72, 86, 75, .42);
  border-radius: 100% 0 100% 0;
}

html[data-variation="botanical"] .line-flourish i:nth-child(1) { top: 78px; left: -49px; transform: rotate(35deg) scaleX(-1); }
html[data-variation="botanical"] .line-flourish i:nth-child(2) { top: 108px; left: 0; transform: rotate(-36deg); }
html[data-variation="botanical"] .line-flourish i:nth-child(3) { top: 174px; left: -51px; transform: rotate(29deg) scaleX(-1); }
html[data-variation="botanical"] .line-flourish i:nth-child(4) { top: 204px; left: -5px; transform: rotate(-32deg); }
html[data-variation="botanical"] .line-flourish b { width: 9px; height: 9px; border-radius: 50%; background: var(--rose); }
html[data-variation="botanical"] .line-flourish b:nth-of-type(1) { top: 19px; left: -6px; }
html[data-variation="botanical"] .line-flourish b:nth-of-type(2) { top: 240px; left: 8px; width: 6px; height: 6px; }

html[data-variation="botanical"] .flourish-hero { right: 45%; bottom: 1%; }
html[data-variation="botanical"] .intro { position: relative; }
html[data-variation="botanical"] .flourish-intro { right: -85px; top: 24%; transform: rotate(-145deg) scale(.85); opacity: .7; }
html[data-variation="botanical"] .flourish-quote { left: 13%; bottom: -2rem; border-color: rgba(255,255,255,.4); transform: rotate(-18deg) scale(1.2); }
html[data-variation="botanical"] .flourish-quote::before,
html[data-variation="botanical"] .flourish-quote::after,
html[data-variation="botanical"] .flourish-quote i { border-color: rgba(255,255,255,.35); }
html[data-variation="botanical"] .flourish-contact { right: 4%; top: 4%; transform: rotate(145deg) scale(.7); opacity: .55; }
html[data-variation="botanical"] .contact-panel { position: relative; overflow: hidden; }

/* Botanical linework with the baseline index palette */

html[data-variation="botanical"][data-palette="index"] {
  --cream: #f8f3ed;
  --paper: #fffdf9;
  --blush: #e8d2cc;
  --rose: #b66f70;
  --plum: #60485a;
  --sage: #b9c4b2;
  --ink: #2d2628;
  --muted: #6e6262;
}

html[data-variation="botanical"][data-palette="index"] .hero {
  background:
    radial-gradient(circle at 78% 32%, rgba(232, 210, 204, .48), transparent 26%),
    linear-gradient(108deg, var(--cream) 0 61%, #efe3dd 61% 100%);
}

html[data-variation="botanical"][data-palette="index"] .photo-note {
  border-color: rgba(96, 72, 90, .22);
  box-shadow: 8px 9px 0 rgba(185, 196, 178, .32);
}

html[data-variation="botanical"][data-palette="index"] .approach {
  background:
    linear-gradient(rgba(96, 72, 90, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(96, 72, 90, .045) 1px, transparent 1px),
    var(--cream);
  background-size: 42px 42px;
}

html[data-variation="botanical"][data-palette="index"] .card { background: rgba(255, 253, 249, .68); }
html[data-variation="botanical"][data-palette="index"] .quote-break { background: var(--plum); }
html[data-variation="botanical"][data-palette="index"] .contact { background: #efe2dc; }

html[data-variation="botanical"][data-palette="index"] .line-flourish,
html[data-variation="botanical"][data-palette="index"] .line-flourish::before,
html[data-variation="botanical"][data-palette="index"] .line-flourish::after {
  border-color: rgba(96, 72, 90, .5);
}

html[data-variation="botanical"][data-palette="index"] .line-flourish i,
html[data-variation="botanical"][data-palette="index"] .line-flourish b {
  border-color: rgba(96, 72, 90, .42);
}

html[data-variation="botanical"][data-palette="index"] .flourish-quote,
html[data-variation="botanical"][data-palette="index"] .flourish-quote::before,
html[data-variation="botanical"][data-palette="index"] .flourish-quote::after,
html[data-variation="botanical"][data-palette="index"] .flourish-quote i {
  border-color: rgba(255, 255, 255, .35);
}

/* Variation 02 — Graphic studio */

html[data-variation="studio"] {
  --cream: #f2ede6;
  --paper: #fffaf2;
  --blush: #e5b8a1;
  --rose: #c55f45;
  --plum: #343f4a;
  --sage: #b8b89a;
  --ink: #26313a;
  --muted: #667079;
}

html[data-variation="studio"] .site-header { border-color: rgba(38,49,58,.34); }
html[data-variation="studio"] .brand-mark { border-radius: 0; transform: rotate(45deg); }
html[data-variation="studio"] .brand-mark::first-letter { transform: rotate(-45deg); }

html[data-variation="studio"] .hero {
  background:
    linear-gradient(90deg, rgba(38,49,58,.07) 1px, transparent 1px),
    linear-gradient(rgba(38,49,58,.07) 1px, transparent 1px),
    linear-gradient(108deg, #f2ede6 0 61%, #e9bba4 61% 100%);
  background-size: 72px 72px, 72px 72px, auto;
}

html[data-variation="studio"] h1 em,
html[data-variation="studio"] h2 em { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .12em; }

html[data-variation="studio"] .portrait-frame {
  width: 68%;
  border: 1px solid var(--ink);
  border-radius: 0;
  box-shadow: 22px 22px 0 var(--paper), 23px 23px 0 var(--ink);
  transform: rotate(1.5deg);
}

html[data-variation="studio"] .portrait-frame::after { inset: 0; border: 0; background: linear-gradient(145deg, transparent 60%, rgba(197,95,69,.18)); }
html[data-variation="studio"] .orbit { border-radius: 0; transform: rotate(45deg); animation: studio-turn 14s linear infinite; }
html[data-variation="studio"] .orbit-two { animation-direction: reverse; }
html[data-variation="studio"] .photo-note { right: -2rem; border: 1px solid var(--ink); box-shadow: 7px 7px 0 var(--ink); transform: rotate(-2deg); }

html[data-variation="studio"] .line-flourish {
  position: absolute;
  z-index: 1;
  display: block;
  width: 148px;
  height: 148px;
  border: 1px solid currentColor;
  color: rgba(38,49,58,.34);
  transform: rotate(45deg);
}

html[data-variation="studio"] .line-flourish::before,
html[data-variation="studio"] .line-flourish::after {
  content: "";
  position: absolute;
  inset: 22px;
  border: 1px solid currentColor;
}
html[data-variation="studio"] .line-flourish::after { inset: 45px; border-radius: 50%; background: var(--rose); opacity: .7; }
html[data-variation="studio"] .line-flourish i,
html[data-variation="studio"] .line-flourish b { display: none; }
html[data-variation="studio"] .flourish-hero { right: 47%; bottom: -35px; }
html[data-variation="studio"] .intro { position: relative; }
html[data-variation="studio"] .flourish-intro { top: 13%; right: -65px; transform: rotate(15deg) scale(.75); }
html[data-variation="studio"] .flourish-quote { left: 8%; bottom: -55px; color: rgba(255,255,255,.3); transform: rotate(30deg) scale(1.45); }
html[data-variation="studio"] .contact-panel { position: relative; overflow: hidden; }
html[data-variation="studio"] .flourish-contact { top: 30px; right: 30px; transform: rotate(60deg) scale(.65); }

html[data-variation="studio"] .approach { background: #d9dccd; }
html[data-variation="studio"] .card { border-color: var(--ink); background: var(--paper); box-shadow: 8px 8px 0 var(--ink); }
html[data-variation="studio"] .card:hover { box-shadow: 14px 14px 0 var(--rose); }
html[data-variation="studio"] .card-icon { border-radius: 0; }
html[data-variation="studio"] .quote-break { background: var(--ink); }
html[data-variation="studio"] .testimonial { border-color: var(--ink); }
html[data-variation="studio"] .testimonial:nth-child(even) { background: #e9bba4; }
html[data-variation="studio"] .contact { background: #e5b8a1; }

/* Variation 03 — Airy herbarium */

html[data-variation="herbarium"] {
  --cream: #f8f7f2;
  --paper: #fffefa;
  --blush: #e5e2db;
  --rose: #788064;
  --plum: #515c43;
  --sage: #cfd3c5;
  --ink: #30352d;
  --muted: #6b7067;
}

html[data-variation="herbarium"] .site-header { border-color: rgba(81,92,67,.18); }
html[data-variation="herbarium"] .brand-mark { border-color: var(--rose); color: var(--rose); }
html[data-variation="herbarium"] .hero {
  background:
    linear-gradient(90deg, transparent 0 58%, #ececea 58% 83%, transparent 83%),
    var(--paper);
}
html[data-variation="herbarium"] .hero-copy { padding-right: 8vw; }
html[data-variation="herbarium"] h1 { font-size: clamp(4.4rem, 8.4vw, 8.7rem); font-weight: 400; }
html[data-variation="herbarium"] h1 em,
html[data-variation="herbarium"] h2 em { color: #788064; }
html[data-variation="herbarium"] .portrait-frame {
  width: 64%;
  padding: 14px;
  border: 1px solid rgba(81,92,67,.28);
  border-radius: 50% 50% 3px 3px;
  background: var(--paper);
  box-shadow: none;
}
html[data-variation="herbarium"] .portrait-frame img { filter: saturate(.65) contrast(.96); border-radius: inherit; }
html[data-variation="herbarium"] .orbit { border-color: rgba(81,92,67,.25); }
html[data-variation="herbarium"] .photo-note { right: -2.5rem; border: 1px solid rgba(81,92,67,.25); box-shadow: none; }
html[data-variation="herbarium"] .approach { background: #f1f2eb; }
html[data-variation="herbarium"] .card { border-color: rgba(81,92,67,.25); background: rgba(255,254,250,.76); }
html[data-variation="herbarium"] .card:hover { box-shadow: 0 22px 52px rgba(81,92,67,.12); }
html[data-variation="herbarium"] .card-icon,
html[data-variation="herbarium"] .card-icon::before,
html[data-variation="herbarium"] .card-icon::after,
html[data-variation="herbarium"] .card-icon span { border-color: #788064; }
html[data-variation="herbarium"] .card-icon span { background: #788064; }
html[data-variation="herbarium"] .quote-break { background: #59634a; }
html[data-variation="herbarium"] .contact { background: #ecece6; }

html[data-variation="herbarium"] .line-flourish {
  position: absolute;
  z-index: 1;
  display: block;
  width: 155px;
  height: 300px;
  border-left: 1.5px solid #788064;
  border-radius: 45%;
  pointer-events: none;
  transform: rotate(16deg);
}
html[data-variation="herbarium"] .line-flourish::before,
html[data-variation="herbarium"] .line-flourish::after,
html[data-variation="herbarium"] .line-flourish i {
  content: "";
  position: absolute;
  display: block;
  width: 39px;
  height: 17px;
  border: 1.5px solid #788064;
  border-radius: 100% 0 100% 0;
}
html[data-variation="herbarium"] .line-flourish::before { top: 37px; left: -4px; transform: rotate(-24deg); }
html[data-variation="herbarium"] .line-flourish::after { top: 77px; left: -35px; transform: rotate(28deg) scaleX(-1); }
html[data-variation="herbarium"] .line-flourish i:nth-child(1) { top: 112px; left: -1px; transform: rotate(-30deg); }
html[data-variation="herbarium"] .line-flourish i:nth-child(2) { top: 150px; left: -38px; transform: rotate(31deg) scaleX(-1); }
html[data-variation="herbarium"] .line-flourish i:nth-child(3) { top: 192px; left: -1px; transform: rotate(-25deg); }
html[data-variation="herbarium"] .line-flourish i:nth-child(4) { top: 230px; left: -34px; transform: rotate(30deg) scaleX(-1); }
html[data-variation="herbarium"] .line-flourish b { position: absolute; display: block; border: 1px solid #788064; border-radius: 50%; }
html[data-variation="herbarium"] .line-flourish b:nth-of-type(1) { top: 8px; left: -5px; width: 8px; height: 13px; }
html[data-variation="herbarium"] .line-flourish b:nth-of-type(2) { top: 275px; left: 8px; width: 6px; height: 9px; }
html[data-variation="herbarium"] .flourish-hero { right: 43%; top: 2%; transform: rotate(-12deg) scale(1.1); }
html[data-variation="herbarium"] .intro { position: relative; }
html[data-variation="herbarium"] .flourish-intro { right: -5rem; bottom: 2rem; transform: rotate(168deg) scale(.78); opacity: .65; }
html[data-variation="herbarium"] .flourish-quote { left: 9%; bottom: -2rem; transform: rotate(-16deg) scale(1.15); opacity: .34; filter: brightness(2.4); }
html[data-variation="herbarium"] .contact-panel { position: relative; overflow: hidden; }
html[data-variation="herbarium"] .flourish-contact { right: 2%; top: 2%; transform: rotate(158deg) scale(.72); opacity: .5; }

/* Variation 04 — Blush flora stationery */

html[data-variation="flora"] {
  --cream: #fbf6f2;
  --paper: #fffdfa;
  --blush: #eaded8;
  --rose: #a57d78;
  --plum: #5a4d51;
  --sage: #a8ad9b;
  --ink: #52494c;
  --muted: #7b6e70;
}

html[data-variation="flora"] .hero {
  background:
    linear-gradient(90deg, transparent 0 57%, rgba(234,222,216,.72) 57% 100%),
    linear-gradient(0deg, transparent 0 86%, rgba(168,173,155,.13) 86% 100%),
    #fffdfa;
}
html[data-variation="flora"] .hero::after {
  content: "";
  position: absolute;
  right: 1.5%;
  bottom: 2%;
  width: 31%;
  height: 26%;
  border: 1px solid rgba(82,73,76,.18);
  background: rgba(255,253,250,.45);
  transform: rotate(-2deg);
}
html[data-variation="flora"] h1 em,
html[data-variation="flora"] h2 em { color: #9c7773; font-weight: 400; }
html[data-variation="flora"] .portrait-frame {
  width: 69%;
  border-radius: 50% 50% 6% 6% / 38% 38% 5% 5%;
  box-shadow: -22px 22px 0 #fffdfa, -23px 23px 0 rgba(82,73,76,.22);
  transform: rotate(-1deg);
}
html[data-variation="flora"] .portrait-frame img { filter: saturate(.7) sepia(.06); }
html[data-variation="flora"] .orbit { border-color: rgba(165,125,120,.34); }
html[data-variation="flora"] .photo-note { right: -2rem; background: #f8efeb; box-shadow: 8px 8px 0 rgba(82,73,76,.12); }
html[data-variation="botanical"] .handwritten img,
html[data-variation="herbarium"] .handwritten img {
  opacity: .72;
  filter: sepia(.45) saturate(.55) hue-rotate(28deg);
}
html[data-variation="studio"] .handwritten {
  width: min(100%, 390px);
  padding: .7rem 1rem .45rem;
  border: 1px solid var(--ink);
  background: var(--paper);
  box-shadow: 6px 6px 0 var(--rose);
  transform: rotate(-2deg);
}
html[data-variation="studio"] .handwritten img { opacity: .88; filter: grayscale(1) contrast(1.15); }
html[data-variation="flora"] .handwritten {
  width: min(100%, 395px);
  margin-bottom: 1.7rem;
  padding: .55rem 1rem .25rem;
  background: rgba(255,253,250,.62);
  box-shadow: 8px 8px 0 rgba(165,125,120,.12);
  transform: rotate(-1deg);
}
html[data-variation="flora"] .handwritten img { opacity: .7; filter: sepia(.3) saturate(.7); }
html[data-variation="flora"] .approach { background: #f4ebe7; }
html[data-variation="flora"] .card { border-color: rgba(82,73,76,.2); background: #fffdfa; }
html[data-variation="flora"] .card:nth-child(2) { transform: translateY(1.4rem); }
html[data-variation="flora"] .card:nth-child(2):hover { transform: translateY(.75rem) rotate(.5deg); }
html[data-variation="flora"] .quote-break { background: #6c6262; }
html[data-variation="flora"] .testimonial:nth-child(even) { background: #f4ebe7; }
html[data-variation="flora"] .contact { background: #eaded8; }

html[data-variation="flora"] .line-flourish {
  position: absolute;
  z-index: 1;
  display: block;
  width: 190px;
  height: 270px;
  border-left: 1px solid rgba(82,73,76,.45);
  border-radius: 50%;
  pointer-events: none;
  transform: rotate(28deg);
}
html[data-variation="flora"] .line-flourish::before,
html[data-variation="flora"] .line-flourish::after,
html[data-variation="flora"] .line-flourish i {
  content: "";
  position: absolute;
  display: block;
  width: 68px;
  height: 24px;
  border: 1px solid rgba(82,73,76,.45);
  border-radius: 100% 0 100% 0;
}
html[data-variation="flora"] .line-flourish::before { top: 28px; left: -6px; transform: rotate(-24deg); }
html[data-variation="flora"] .line-flourish::after { top: 68px; left: -60px; transform: rotate(25deg) scaleX(-1); }
html[data-variation="flora"] .line-flourish i:nth-child(1) { top: 108px; left: -1px; transform: rotate(-27deg); }
html[data-variation="flora"] .line-flourish i:nth-child(2) { top: 144px; left: -62px; transform: rotate(27deg) scaleX(-1); }
html[data-variation="flora"] .line-flourish i:nth-child(3) { top: 183px; left: -4px; transform: rotate(-24deg); }
html[data-variation="flora"] .line-flourish i:nth-child(4) { top: 215px; left: -56px; transform: rotate(26deg) scaleX(-1); }
html[data-variation="flora"] .line-flourish b { position: absolute; display: block; width: 5px; height: 5px; border-radius: 50%; background: #a8ad9b; }
html[data-variation="flora"] .line-flourish b:nth-of-type(1) { top: 11px; left: -3px; }
html[data-variation="flora"] .line-flourish b:nth-of-type(2) { top: 253px; left: 8px; }
html[data-variation="flora"] .flourish-hero { right: 42%; top: 4%; transform: rotate(-10deg) scale(1.14); }
html[data-variation="flora"] .intro { position: relative; }
html[data-variation="flora"] .flourish-intro { right: -4rem; top: 12%; transform: rotate(156deg) scale(.72); opacity: .62; }
html[data-variation="flora"] .flourish-quote { left: 12%; bottom: -3rem; transform: rotate(-22deg) scale(1.15); filter: brightness(2.5); opacity: .28; }
html[data-variation="flora"] .contact-panel { position: relative; overflow: hidden; }
html[data-variation="flora"] .flourish-contact { right: 3%; top: 2%; transform: rotate(154deg) scale(.7); opacity: .45; }

@keyframes studio-turn {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (max-width: 720px) {
  html[data-variation] .flourish-hero { right: -50px; bottom: 22%; transform: rotate(18deg) scale(.65); }
  html[data-variation] .flourish-intro { right: -65px; opacity: .4; }
  html[data-variation] .flourish-contact { opacity: .25; }
  html[data-variation="studio"] .portrait-frame { width: 74%; }
  html[data-variation="flora"] .card:nth-child(2) { transform: none; }
  html[data-variation="herbarium"] .hero,
  html[data-variation="flora"] .hero { background-position: center; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-variation="studio"] .orbit { animation: none; }
}