/* An interactive style board, shared with the live WordPress theme. */
.style-studio { --studio-accent: #dfb78f; padding: 95px 0 80px; position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(ellipse at 80% 55%,#32304435,transparent 60%),#0c0d12; }
.style-studio-grid { position: absolute; inset: 0; pointer-events: none; z-index: -1; background-image: linear-gradient(#ffffff03 1px,transparent 1px),linear-gradient(90deg,#ffffff03 1px,transparent 1px); background-size: 85px 85px; mask-image: linear-gradient(180deg,transparent,#0006 50%,transparent); }
.style-studio-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 35px; margin-bottom: 38px; }
.style-studio-intro .v3-eyebrow { display: inline-flex; align-items: center; gap: 9px; color: #c7c3d9; }
.style-studio-intro .v3-eyebrow i { display: block; width: 5px; height: 5px; background: var(--studio-accent); border-radius: 50%; box-shadow: 0 0 15px var(--studio-accent); }
.style-studio-intro h2 { font-size: clamp(43px,4.3vw,63px); line-height: 1.06; letter-spacing: -2px; margin-top: 14px; }
.style-studio-intro h2 em { font-family: 'Instrument Serif',serif; font-weight: 400; color: #aaa0ef; }
.style-studio-intro > p { color: #bcbccc; font-size: 16px; line-height: 1.75; max-width: 38ch; padding-bottom: 4px; }
.style-studio-layout { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); grid-template-rows: auto auto 1fr; gap: 12px 42px; align-items: start; }
.style-visual-workspace,.style-inspector { min-width: 0; }
.style-inspector { display: contents; }
.style-visual-workspace { grid-column: 1; grid-row: 1 / span 3; }
.style-choice-heading { grid-column: 2; grid-row: 1; }
.style-choices { grid-column: 2; grid-row: 2; }
.style-story { grid-column: 2; grid-row: 3; }
.style-canvas { height: 440px; position: relative; border: 1px solid #ffffff25; border-radius: 22px; overflow: hidden; background: #1c1b20; box-shadow: 0 18px 55px #0003; }
.style-scene { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; transition: opacity 750ms ease,visibility 750ms; pointer-events: none; }
.style-scene.is-active { opacity: 1; visibility: visible; z-index: 1; }
.style-scene:after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg,#090a1230,transparent 30%,transparent 45%,#0d0e17d9 100%); pointer-events: none; }
.style-scene > img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.045); transition: transform 1300ms cubic-bezier(.15,.55,.2,1); }
.style-scene.is-active > img { transform: scale(1); }
.style-scene figcaption { position: absolute; z-index: 2; left: 25px; bottom: 24px; color: #fff; display: flex; flex-direction: column; gap: 5px; }
.style-scene figcaption > span { font-size: 9px; letter-spacing: 1.4px; color: #ded5c8; }
.style-scene figcaption strong { font: 500 29px/1.2 var(--head); letter-spacing: -.7px; }
.style-scene figcaption small { font-size: 8px; letter-spacing: .8px; color: #c8c4cf; }
.style-canvas-label { position: absolute; z-index: 2; top: 18px; left: 18px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid #ffffff3b; padding: 7px 10px; border-radius: 30px; background: #11131c80; backdrop-filter: blur(12px); font-size: 8px; line-height: 1.4; letter-spacing: .9px; color: #fff; }
.style-canvas-label i { width: 4px; height: 4px; border-radius: 50%; background: var(--studio-accent); }
.style-zoom { position: absolute; z-index: 3; top: 15px; right: 15px; min-height: 44px; padding: 10px 12px; display: inline-flex; align-items: center; gap: 8px; border-radius: 30px; border: 1px solid #ffffff48; background: #10121ba8; backdrop-filter: blur(12px); color: #fff; font-size: 12px; }
.style-zoom:hover { background: #29263ee8; }
.style-canvas-coordinate { position: absolute; z-index: 2; bottom: 23px; right: 22px; font-size: 8px; letter-spacing: 1px; color: #d1cbd8; writing-mode: vertical-rl; }
.style-palette-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 22px 0 12px; }
.style-palette-heading > span:first-child { font-size: 9px; letter-spacing: 1.2px; color: #c6c1d4; }
.style-palette-heading > span:last-child { font-size: 10px; color: #8f90a6; display: flex; align-items: center; gap: 5px; }
.style-materials { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.style-material { border: 1px solid transparent; padding: 5px; border-radius: 12px; text-align: left; min-width: 0; background: transparent; transition: border-color 250ms,background 250ms; }
.style-material.is-active { border-color: #c5b9ff70; background: #b2a0f009; }
.style-material-sample { display: block; position: relative; overflow: hidden; height: 69px; border-radius: 7px; border: 1px solid #ffffff1c; background-color: var(--sample-color); }
.style-material-sample:after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(120deg,#ffffff21,transparent 55%,#00000018); }
.style-material-sample > span { position: absolute; top: 7px; left: 8px; font-size: 8px; color: #fff; text-shadow: 0 1px 3px #0009; }
.style-material-sample > svg { position: absolute; right: 6px; bottom: 6px; z-index: 1; color: #fff; background: #17152380; border-radius: 50%; padding: 3px; width: 22px; height: 22px; }
.style-material:not(.is-active) .style-material-check { display: none; }
.style-material > strong { display: block; margin: 7px 4px 1px; font-size: 14px; font-weight: 500; line-height: 1.4; color: #e8e3ef; }
.style-material > small { display: block; margin: 0 4px 4px; font-size: 10px; line-height: 1.5; color: #8f90a6; }
.texture-oak,.texture-oak-light,.texture-walnut { background-image: repeating-linear-gradient(92deg,transparent 0px,transparent 4px,#3025161a 5px,transparent 7px,transparent 15px,#ffffff16 16px,transparent 18px); }
.texture-stone { background-image: repeating-linear-gradient(-8deg,transparent 0px,transparent 5px,#907b5d20 7px,transparent 9px,transparent 17px,#ffffff33 19px,transparent 21px),radial-gradient(ellipse at 60% 20%,#ffffff25,transparent 60%); }
.texture-mineral { background-image: radial-gradient(ellipse at 30% 70%,#ffffff18,transparent 65%),repeating-linear-gradient(8deg,transparent 0px,transparent 2px,#00000005 3px,transparent 5px); }
.texture-linen { background-image: repeating-linear-gradient(0deg,transparent 0,transparent 2px,#ffffff16 3px,transparent 4px),repeating-linear-gradient(90deg,transparent 0,transparent 2px,#00000012 3px,transparent 4px); }
.texture-metal { background-image: linear-gradient(115deg,#ffffff0a,#ffffff66 35%,#00000020 70%,#ffffff30),repeating-linear-gradient(0deg,transparent 0px,transparent 1px,#00000013 2px,transparent 3px); }
.style-material-note { font-size: 13px; line-height: 1.65; color: #a5a4ba; min-height: 44px; margin: 13px 4px 0; }
.style-material-note strong { color: #d5c9be; font-weight: 500; }
.style-choice-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #9393a9; font-size: 9px; letter-spacing: 1px; padding: 0 2px 14px; }
.style-choice-heading > span:last-child { font-size: 12px; letter-spacing: .4px; color: #d2cfe2; }
.style-choices { display: grid; gap: 9px; }
.style-choice { min-width: 0; display: flex; align-items: center; gap: 14px; min-height: 81px; padding: 9px 13px 9px 9px; border: 1px solid #ffffff16; border-radius: 13px; background: #16172085; text-align: left; transition: border-color 250ms,background 250ms,transform 250ms; }
.style-choice > img { flex-shrink: 0; width: 70px; height: 58px; border-radius: 7px; object-fit: cover; opacity: .65; transition: opacity 250ms; }
.style-choice > span:nth-child(2) { flex: 1; min-width: 0; }
.style-choice strong { display: block; font: 500 20px/1.3 var(--head); color: #b9b8ca; letter-spacing: -.25px; }
.style-choice small { display: block; font-size: 10px; line-height: 1.5; color: #777c94; margin-top: 3px; }
.style-choice-indicator { width: 28px; height: 28px; border: 1px solid #ffffff15; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; color: #a19cb8; }
.style-choice.is-active { border-color: #c0b3f775; background: linear-gradient(100deg,#2a263fa0,#1b1c27); box-shadow: inset 3px 0 #ada0ed; }
.style-choice.is-active strong { color: #f2edff; }
.style-choice.is-active small { color: #aaa5bf; }
.style-choice.is-active > img { opacity: 1; }
.style-choice.is-active .style-choice-indicator { color: #e3d8ff; border-color: #b1a0ec70; background: #aa90f012; }
.style-choice.is-active .style-choice-arrow,.style-choice:not(.is-active) .style-choice-check { display: none; }
.style-choice-indicator > svg { width: 17px; height: 17px; }
.style-palette-heading svg { width: 13px; height: 13px; }
.style-choice:hover { border-color: #8f84b66b; }
.style-story { margin-top: 18px; animation: studio-story-in 450ms ease-out; }
.style-story-label { color: var(--studio-accent); font-size: 9px; letter-spacing: 1.25px; }
.style-story h3 { margin: 10px 0 14px; font-size: clamp(27px,2.6vw,36px); line-height: 1.15; letter-spacing: -1px; text-wrap: pretty; }
.style-story > p:not(.style-brief-helper) { color: #b9b9cc; font-size: 16px; line-height: 1.75; min-height: 84px; }
.style-story-rule { height: 1px; width: 100%; margin: 22px 0; background: linear-gradient(90deg,var(--studio-accent),#ffffff0c); opacity: .3; }
.style-brief-action { display: flex; align-items: center; justify-content: space-between; gap: 15px; width: 100%; min-height: 54px; padding: 14px 18px; border: 1px solid #c6b6ff38; border-radius: 9px; color: #f2edff; background: #7666bd3d; font-size: 15px; font-weight: 500; transition: background 200ms; }
.style-brief-action:hover { background: #7666bd67; }
.style-brief-helper { font-size: 11px; color: #9290aa; line-height: 1.6; margin-top: 8px; }
.style-service-action { display: flex; align-items: center; gap: 12px; min-height: 44px; width: fit-content; font-size: 12px; color: #bcb8d8; margin-top: 10px; }
.style-studio-note { border-top: 1px solid #ffffff10; margin-top: 35px; padding-top: 18px; font-size: 11px; color: #7e8198; line-height: 1.65; }
.studio-lightbox { position: fixed; inset: 0; width: min(1200px,calc(100% - 50px)); max-height: calc(100dvh - 40px); padding: 16px; border: 1px solid #ffffff26; border-radius: 20px; color: #eeeaf6; background: #13151e; box-shadow: 0 24px 100px #0008; overflow: auto; }
.studio-lightbox::backdrop { background: #05060de3; backdrop-filter: blur(10px); }
.studio-lightbox figure { margin: 0; }
.studio-lightbox figure > img { display: block; width: 100%; max-height: 76dvh; height: auto; object-fit: contain; border-radius: 10px; }
.studio-lightbox figcaption { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 13px 5px 2px; }
.studio-lightbox figcaption strong { font: 500 21px/1.4 var(--head); }
.studio-lightbox figcaption span { color: #a4a1b8; font-size: 9px; letter-spacing: 1px; }
.studio-lightbox-close { position: absolute; z-index: 2; top: 26px; right: 26px; min-width: 44px; min-height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1px solid #ffffff55; color: #fff; background: #151622cc; backdrop-filter: blur(10px); }
body:has(.studio-lightbox[open]) { overflow: hidden; }
@keyframes studio-story-in { from { opacity: .3; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width:1100px) and (min-width:961px) { .style-studio-layout { gap: 28px; grid-template-columns: 1.25fr 1fr; } .style-choice { gap: 10px; } .style-choice > img { width: 55px; } .style-choice strong { font-size: 18px; } .style-canvas { height: 430px; } }
@media (max-width:960px) {
  .style-studio-layout { grid-template-columns: 1fr; grid-template-rows: none; gap: 16px; }
  .style-choice-heading,.style-choices,.style-visual-workspace,.style-story { grid-column: 1; grid-row: auto; }
  .style-choice-heading { padding-bottom: 0; }
  .style-choices { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-bottom: 6px; }
  .style-story { margin-top: 10px; }
  .style-choice { display: block; position: relative; padding: 8px; }
  .style-choice > img { width: 100%; height: 100px; }
  .style-choice > span:nth-child(2) { display: block; margin: 10px 5px 6px; }
  .style-choice strong { font-size: 19px; }
  .style-choice small { font-size: 10px; }
  .style-choice-indicator { position: absolute; top: 15px; right: 15px; background: #161620cc; color: white; }
  .style-choice.is-active .style-choice-indicator { background: #252139ee; }
  .style-canvas { height: auto; aspect-ratio: 4/3; max-height: 550px; }
  .style-story h3 { font-size: 34px; max-width: 25ch; }
  .style-story > p:not(.style-brief-helper) { min-height: 0; max-width: 65ch; }
  .style-studio-intro > p br { display: none; }
}
@media (max-width:640px) {
  .style-studio { padding-block: 58px 50px; }
  .style-studio-intro { display: block; margin-bottom: 28px; }
  .style-studio-intro h2 { font-size: 47px; letter-spacing: -1.8px; }
  .style-studio-intro > p { font-size: 16px; line-height: 1.7; margin-top: 22px; max-width: 38ch; }
  .style-studio-layout { gap: 13px; }
  .style-choice-heading { font-size: 8px; letter-spacing: .9px; }
  .style-choice-heading > span:last-child { font-size: 10px; }
  .style-choices { gap: 7px; }
  .style-choice { padding: 5px; border-radius: 10px; min-height: 115px; }
  .style-choice > img { height: 63px; border-radius: 5px; }
  .style-choice > span:nth-child(2) { margin: 7px 3px 4px; }
  .style-choice strong { font-size: 13px; letter-spacing: -.2px; line-height: 1.3; }
  .style-choice small { display: none; }
  .style-choice-indicator { width: 23px; height: 23px; top: 10px; right: 10px; }
  .style-choice-indicator svg { width: 13px; height: 13px; }
  .style-canvas { border-radius: 15px; }
  .style-canvas-label { left: 12px; top: 12px; font-size: 6px; padding: 6px 8px; letter-spacing: .7px; }
  .style-zoom { right: 10px; top: 8px; min-width: 44px; justify-content: center; padding: 10px; }
  .style-zoom > span { display: none; }
  .style-scene figcaption { left: 18px; bottom: 18px; gap: 3px; }
  .style-scene figcaption strong { font-size: 24px; }
  .style-scene figcaption > span { font-size: 7px; }
  .style-scene figcaption small { font-size: 6px; }
  .style-canvas-coordinate { right: 15px; bottom: 18px; font-size: 6px; }
  .style-palette-heading { margin-top: 19px; gap: 8px; }
  .style-palette-heading > span:first-child { font-size: 8px; letter-spacing: .8px; }
  .style-palette-heading > span:last-child { font-size: 8px; }
  .style-materials { gap: 6px; }
  .style-material { padding: 4px; }
  .style-material-sample { height: 64px; }
  .style-material > strong { font-size: 13px; margin-inline: 3px; }
  .style-material > small { font-size: 9px; margin-inline: 3px; }
  .style-material-note { font-size: 13px; min-height: 65px; margin-top: 13px; }
  .style-story { margin-top: 0; }
  .style-story h3 { font-size: 31px; line-height: 1.18; }
  .style-story > p:not(.style-brief-helper) { font-size: 16px; line-height: 1.75; }
  .style-story-rule { margin-block: 20px; }
  .style-brief-helper { font-size: 11px; }
  .style-service-action { font-size: 13px; }
  .style-studio-note { margin-top: 27px; font-size: 11px; }
  .studio-lightbox { width: calc(100% - 20px); padding: 8px; border-radius: 13px; }
  .studio-lightbox-close { top: 16px; right: 16px; }
  .studio-lightbox figcaption { display: block; margin: 11px 7px; }
  .studio-lightbox figcaption strong { display: block; font-size: 19px; }
  .studio-lightbox figcaption span { font-size: 8px; }
}
@media (prefers-reduced-motion:reduce) {
  .style-scene,.style-scene > img,.style-choice,.style-material { transition: none; }
  .style-scene > img,.style-scene.is-active > img { transform: none; }
  .style-story { animation: none; }
}