/* Sandie DuBois — a portrait, her practice, and the work from her chair.
   Shared publication typography, branding and navigation live in public.css. */
html:has(body[data-artist="sandie"]) { scroll-behavior: auto; }
.artist-feature[data-artist="sandie"] {
  --feature-space: clamp(3.5rem, 7vw, 6.5rem);
}

[data-artist="sandie"] .feature-meta a:hover { text-decoration: underline; }
.artist-feature[data-artist="sandie"] .plate { padding-block: 1.5rem 3rem; }
.artist-feature[data-artist="sandie"] .plate__grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
}
.artist-feature[data-artist="sandie"] .plate__rule { margin: 1.4rem 0 1.7rem; }
.artist-feature[data-artist="sandie"] .kicker { margin: 1.4rem 0 0; max-width: 25ch; }
.artist-feature[data-artist="sandie"] .house {
  margin: .9rem 0 0;
  font-style: normal;
}
.artist-feature[data-artist="sandie"] .plate .lede { max-width: 46ch; margin-top: 1.3rem; }
[data-artist="sandie"] .portrait-frame { position: relative; }
.artist-feature[data-artist="sandie"] .artist-stamp {
  position: absolute;
  left: 5%;
  bottom: 5%;
  width: 22%;
  pointer-events: none;
}
.artist-feature[data-artist="sandie"] .artist-stamp img { aspect-ratio: auto; object-fit: contain; }
[data-artist="sandie"] .plate__shot figcaption {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .25rem 1rem;
  padding-top: .85rem;
  color: var(--muted);
}
.artist-feature[data-artist="sandie"] .cta-row { gap: .9rem 1.25rem; margin-top: 1.6rem; }
[data-artist="sandie"] .cta-row .quiet { min-height: 44px; display: inline-flex; align-items: center; }
.artist-feature[data-artist="sandie"] .vitals {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding-block: 1.7rem;
  gap: 1.5rem 2.5rem;
}
.artist-feature[data-artist="sandie"] .vitals b { font-size: 2rem; }
.artist-feature[data-artist="sandie"] .vitals li { font-size: .8125rem; }
[data-artist="sandie"] .feature-sections {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 2rem;
  border-block: 1px solid var(--rule);
  padding-block: .6rem;
}
[data-artist="sandie"] .feature-sections .lab { margin-right: auto; }
[data-artist="sandie"] .feature-sections a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: .8125rem;
  text-decoration: none;
}
[data-artist="sandie"] .feature-sections a:hover { text-decoration: underline; }
.artist-feature[data-artist="sandie"] .sec__head { max-width: 48rem; }
[data-artist="sandie"] .transforms__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: calc(72vh * 3 / 2 + 2rem);
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
[data-artist="sandie"] .transforms__grid > div { min-width: 0; }
/* Before / after: one photograph at a time (the switch, KB #9106). A wipe slider split
   one face down the middle from two photos taken on different days, and read as edited. */
[data-artist="sandie"] .sw { margin: 0 auto; width: min(100%, calc(72vh * 3 / 4)); }
[data-artist="sandie"] .sw__frame { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--image-ground); cursor: pointer; }
[data-artist="sandie"] .sw__frame picture,
[data-artist="sandie"] .sw__frame img { position: absolute; inset: 0; width: 100%; height: 100%; }
[data-artist="sandie"] .sw__frame img { object-fit: cover; }
[data-artist="sandie"] .sw__frame picture { opacity: 0; transition: opacity .18s ease; }
/* the outgoing photo fades out, THEN the incoming one fades in: a cross-fade would make the same ghost face */
[data-artist="sandie"] .sw[data-state="before"] .sw__b,
[data-artist="sandie"] .sw[data-state="after"] .sw__a { opacity: 1; transition-delay: .18s; }
[data-artist="sandie"] .sw__now {
  position: absolute;
  left: .85rem;
  top: .85rem;
  padding: .35rem .7rem;
  font-size: .75rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(37, 34, 30, .86);
  pointer-events: none;
}
[data-artist="sandie"] .sw__ctl { display: grid; grid-template-columns: 1fr 1fr; margin-top: .6rem; border: 1px solid var(--rule); }
[data-artist="sandie"] .sw__ctl button {
  appearance: none;
  border: 0;
  border-radius: 0;
  background: transparent;
  min-height: 44px;
  font: 500 .75rem/1 var(--body);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-2);
}
[data-artist="sandie"] .sw__ctl button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
[data-artist="sandie"] .sw__ctl button:not([aria-pressed="true"]):hover { background: var(--stone); color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  [data-artist="sandie"] .sw__frame picture { transition: none; }
}
.artist-feature[data-artist="sandie"] .pick { background: var(--stone); }
.artist-feature[data-artist="sandie"] .pick .wrap { padding-block: var(--feature-space); }
[data-artist="sandie"] .notes { padding-top: .5rem; }
[data-artist="sandie"] .plate-lead .frame { max-width: 30rem; }
.artist-feature[data-artist="sandie"] .install { background: var(--deep); }
.artist-feature[data-artist="sandie"] .install__grid { grid-template-columns: .9fr 1.1fr; gap: 8vw; }
.artist-feature[data-artist="sandie"] .install__grid { align-items: start; }
.artist-feature[data-artist="sandie"] .install__grid > .frame { position: sticky; top: 5rem; }
.artist-feature[data-artist="sandie"] .install h2 { color: var(--paper); max-width: 16ch; }
.artist-feature[data-artist="sandie"] .install p { color: #e0d8cc; line-height: 1.8; }
.artist-feature[data-artist="sandie"] .install .flag { color: #cec1ad; }
[data-artist="sandie"] .install .frame { order: 2; }
[data-artist="sandie"] .salon .pair { max-width: 65rem; margin-inline: auto; }
[data-artist="sandie"] .salon .pair > div:last-child { padding-top: 5rem; }
[data-artist="sandie"] .looks { background: var(--stone); }
[data-artist="sandie"] .looks .wrap { padding-block: var(--feature-space); }
[data-artist="sandie"] .looks__grid { display: block; columns: 3; column-gap: 1.5rem; }
[data-artist="sandie"] .looks__grid figure { break-inside: avoid; margin: 0 0 1.5rem; }
[data-artist="sandie"] #methods .sec__head {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: 1rem clamp(2rem, 5vw, 5rem);
  max-width: none;
}
[data-artist="sandie"] #methods .sec__head .lab { grid-column: 1 / -1; margin: 0; }
[data-artist="sandie"] #methods .sec__head h2 { margin: 0; }
[data-artist="sandie"] #methods .sec__head > p:not(.lab) { max-width: 43ch; margin: 0 0 .35rem; justify-self: end; }
.artist-feature[data-artist="sandie"] .feed { background: var(--paper); }
[data-artist="sandie"] .feed__grid { grid-template-columns: 1.1fr .9fr; gap: 8vw; }
[data-artist="sandie"] .handle { font-size: clamp(1.8rem, 3vw, 2.5rem); }
[data-artist="sandie"] .tiles { gap: .75rem; max-width: 28rem; justify-self: end; }
.artist-feature[data-artist="sandie"] .book { background: var(--deep); color: var(--paper); }
[data-artist="sandie"] .book > .wrap { padding-block: var(--feature-space); }
.artist-feature[data-artist="sandie"] .book__grid { grid-template-columns: 1.1fr .9fr; gap: 8vw; }
.artist-feature[data-artist="sandie"] .book .lab { color: #cec1ad; }
[data-artist="sandie"] .book h2 { max-width: 13ch; }
[data-artist="sandie"] .booking-intro { max-width: 45ch; margin: 1.4rem 0 0; color: #e0d8cc; }
.artist-feature[data-artist="sandie"] .book__note { color: #e0d8cc; }
[data-artist="sandie"] .book .btn { background: var(--paper); color: var(--ink); border-color: var(--paper); }
[data-artist="sandie"] .book .btn:hover { background: var(--stone); border-color: var(--stone); }
/* artist-editorial.css gives .feature-edition .book .facts a stone panel; her booking section is dark, with cream facts */
.artist-feature[data-artist="sandie"] .book .facts { background: none; padding: 0; }
.artist-feature[data-artist="sandie"] .facts dt { color: #cec1ad; }
.artist-feature[data-artist="sandie"] .facts dd { color: var(--paper); }
[data-artist="sandie"] .facts :is(dt, dd) { border-color: #5b554a; padding-top: .9rem; }
[data-artist="sandie"] .book a:focus-visible { outline-color: var(--paper); }

/* Sandie's custom wigs and the education that comes with every fitting. */
[data-artist="sandie"] .wig-story__grid,
[data-artist="sandie"] .client-care__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 7vw, 7rem);
}
[data-artist="sandie"] .wig-story h2,
[data-artist="sandie"] .client-care h2 { max-width: 17ch; }
[data-artist="sandie"] .wig-story__copy { padding-top: 2.25rem; }
[data-artist="sandie"] .wig-story__copy p,
[data-artist="sandie"] .client-care p { max-width: 48ch; line-height: 1.8; }
[data-artist="sandie"] .wig-story__copy p + p,
[data-artist="sandie"] .client-care p + p { margin-top: 1.2rem; }
[data-artist="sandie"] .client-care { background: var(--stone); }
[data-artist="sandie"] .client-care > .wrap { padding-block: var(--feature-space); }
[data-artist="sandie"] .client-care h2 + p { margin-top: 1.5rem; }
[data-artist="sandie"] .client-care__details { padding-top: 2.25rem; }
[data-artist="sandie"] .client-care h3 {
  font-family: var(--display);
  font-size: clamp(1.65rem, 2.5vw, 2.15rem);
  font-weight: 400;
  line-height: 1.25;
  margin: 0 0 1.25rem;
}
[data-artist="sandie"] .booking-detail { max-width: 45ch; margin: 1.2rem 0 0; color: #e0d8cc; }
[data-artist="sandie"] .install__grid > .rv > .frame { max-width: 20rem; margin-top: 2.4rem; }
[data-artist="sandie"] .priscilla-caption { color: #e0d8cc; font-size: .875rem; line-height: 1.6; margin-top: .85rem; }
/* the caption sits inside the frame, whose stone fill would put cream text on cream */
.artist-feature[data-artist="sandie"] .install .frame:has(.priscilla-caption) { background: transparent; }

@media (max-width: 760px) {
  [data-artist="sandie"] .wig-story__grid,
  [data-artist="sandie"] .client-care__grid { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  [data-artist="sandie"] .wig-story__copy,
  [data-artist="sandie"] .client-care__details { padding-top: 0; }
}

@media (min-width: 961px) and (max-height: 800px) {
  [data-artist="sandie"] .transforms__grid { max-width: calc(162vh + 4rem); }
}
@media (max-width: 960px) {
  .artist-feature[data-artist="sandie"] .plate__grid { grid-template-columns: minmax(0, 1fr); gap: 1.3rem; }
  .artist-feature[data-artist="sandie"] .plate .kicker,
  .artist-feature[data-artist="sandie"] .plate .house,
  .artist-feature[data-artist="sandie"] .plate .lede,
  .artist-feature[data-artist="sandie"] .plate .cta-row { margin: 0; }
  .artist-feature[data-artist="sandie"] .plate .kicker { max-width: none; }
  .artist-feature[data-artist="sandie"] .plate h1 em { display: inline; }
  [data-artist="sandie"] .feature-sections { gap: 0 1.5rem; }
  [data-artist="sandie"] .feature-sections .lab { flex-basis: 100%; padding-block: .4rem; }
  .artist-feature[data-artist="sandie"] .pick__grid { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  [data-artist="sandie"] .pick h2 { max-width: 24ch; }
  [data-artist="sandie"] .pick p { max-width: 65ch; }
  [data-artist="sandie"] .notes li:last-child { border-bottom: 0; }
  .artist-feature[data-artist="sandie"] .install__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; }
  [data-artist="sandie"] .feed__grid { gap: 2.5rem; }
  .artist-feature[data-artist="sandie"] .book__grid { grid-template-columns: minmax(0, 1fr); gap: 3rem; }
  [data-artist="sandie"] .book h2 { max-width: 20ch; }
}
@media (max-width: 900px) {
  [data-artist="sandie"] #methods .sec__head { grid-template-columns: minmax(0, 1fr); max-width: 30rem; margin-inline: auto; }
  [data-artist="sandie"] #methods .sec__head > p:not(.lab) { max-width: none; margin: 0; justify-self: start; }
}
@media (max-width: 760px) {
  [data-artist="sandie"] .transforms__grid { grid-template-columns: minmax(0, 1fr); max-width: min(100%, 30rem); gap: 2.5rem; }
  [data-artist="sandie"] .sw { width: min(100%, 54svh); }
  [data-artist="sandie"] .ba__cap { max-width: 54svh; margin-inline: auto; }
  .artist-feature[data-artist="sandie"] .plate-lead,
  .artist-feature[data-artist="sandie"] .install__grid,
  [data-artist="sandie"] .feed__grid { grid-template-columns: minmax(0, 1fr); }
  [data-artist="sandie"] .plate-lead .frame { width: min(100%, 30rem); justify-self: center; }
  [data-artist="sandie"] .install .frame { max-width: 30rem; justify-self: center; }
  .artist-feature[data-artist="sandie"] .install__grid > .frame { position: static; }
  [data-artist="sandie"] .salon .pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
  [data-artist="sandie"] .salon .pair > div:last-child { padding-top: 2rem; }
  [data-artist="sandie"] #custom-wigs .pair { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  [data-artist="sandie"] #custom-wigs .pair > div:last-child { padding-top: 0; }
  [data-artist="sandie"] .salon .cap { font-size: .875rem; }
  [data-artist="sandie"] .looks__grid { columns: 2; column-gap: 1rem; }
  [data-artist="sandie"] .looks__grid figure { margin-bottom: 1rem; }
  [data-artist="sandie"] .tiles { width: 100%; max-width: 32rem; justify-self: center; }
}
@media (max-width: 600px) {
  .artist-feature[data-artist="sandie"] .plate { padding-bottom: 2rem; }
  .artist-feature[data-artist="sandie"] .vitals { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
  .artist-feature[data-artist="sandie"] .vitals b { font-size: 1.75rem; }
  .artist-feature[data-artist="sandie"] .plate__grid > .lab { font-size: .6875rem; }
  .artist-feature[data-artist="sandie"] .artist-stamp { width: 23%; }
  .artist-feature[data-artist="sandie"] .plate__shot figcaption { font-size: .75rem; }
  [data-artist="sandie"] .feature-sections { gap: 0 1.25rem; }
  [data-artist="sandie"] .notes { grid-template-columns: minmax(0, 1fr); }
  [data-artist="sandie"] .book .btn { width: 100%; }
}