/* Concept Lab application styles.

   Page-local by design: every other page on this site is self-contained inline,
   but this one is an application rather than a marketing page and the volume no
   longer belongs in <style>. Tokens, type and motion all come from the page's
   own :root — nothing here invents a new colour. */

/* ---------- hero: three steps ---------- */
.steps { display: flex; gap: 0; margin: 4.5vh 0 0; border-top: 1px solid var(--hairl); }
.steps .step { flex: 1; padding: 26px 22px 26px 0; border-bottom: 1px solid var(--hairl); }
.steps .step + .step { padding-left: 26px; border-left: 1px solid var(--hairl); }
.steps .n {
  font-family: var(--serif); font-style: italic; font-weight: 200;
  font-size: 15px; color: var(--champ); display: block; margin-bottom: 10px;
}
.steps .t { font-family: var(--serif); font-weight: 200; font-size: clamp(15px, 1.5vw, 20px); line-height: 1.25; }
.steps .d { font-size: 10.5px; color: var(--mut); margin-top: 8px; line-height: 1.8; }
@media (max-width: 760px) {
  .steps { flex-direction: column; }
  .steps .step + .step { padding-left: 0; border-left: 0; }
}

/* hero visual: real images when we have a true pair, otherwise a single frame */
.baslider .ba-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-single { position: relative; aspect-ratio: 4/3; overflow: hidden; border: 1px solid rgba(242, 237, 226, .18); }
.hero-single img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-single .cap {
  position: absolute; left: 14px; bottom: 14px; z-index: 3;
  font-size: 7.5px; letter-spacing: .42em; text-transform: uppercase;
  color: rgba(242, 237, 226, .9); background: rgba(12, 11, 9, .5); padding: 8px 12px 7px;
}

/* ---------- uploader ---------- */
.drop.over { border-color: var(--champ); background: rgba(201, 162, 39, .05); }
.drop.has { padding: 5vh 30px; }
.up-count { font-size: 9px; letter-spacing: .36em; text-transform: uppercase; color: var(--champ); margin-top: 14px; }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; margin-top: 22px; }
.thumb { position: relative; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--hairl); }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb button {
  position: absolute; top: 4px; right: 4px; width: 22px; height: 22px;
  border: none; border-radius: 50%; background: rgba(12, 11, 9, .78); color: var(--ivory);
  font-size: 13px; line-height: 1; cursor: pointer; padding: 0;
}
.thumb button:hover { background: var(--champ); color: var(--ink); }
.up-actions { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; margin-top: 26px; }
.up-clear {
  background: none; border: none; cursor: pointer; padding: 0;
  font-size: 8.5px; letter-spacing: .36em; text-transform: uppercase; color: var(--mut);
}
.up-clear:hover { color: var(--champ); }
.up-err { font-size: 11px; color: #d08a5e; margin-top: 14px; line-height: 1.8; }

/* ---------- concept grid (step III) ---------- */
.concepts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 30px; }
@media (max-width: 620px) { .concepts { grid-template-columns: 1fr; } }
.ccard { position: relative; border: 1px solid var(--hairl); overflow: hidden; }
.ccard .shot { position: relative; aspect-ratio: 3/2; overflow: hidden; background: rgba(242, 237, 226, .04); }
.ccard .shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.4s cubic-bezier(.2, .6, .2, 1); }
.ccard:hover .shot img { transform: scale(1.035); }
.ccard .meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; }
.ccard .nm { font-family: var(--serif); font-weight: 200; font-size: 17px; }
.ccard .st { font-size: 7.5px; letter-spacing: .34em; text-transform: uppercase; color: var(--mut); }
.ccard.sel { border-color: var(--champ); }
.ccard.sel .st { color: var(--champ); }
.ccard .pick {
  position: absolute; inset: auto 0 0 0; z-index: 3; display: flex; gap: 10px;
  padding: 12px 16px; background: linear-gradient(to top, rgba(12, 11, 9, .9), transparent);
  opacity: 0; transition: opacity .35s;
}
.ccard:hover .pick, .ccard:focus-within .pick { opacity: 1; }
.ccard .pick button {
  background: none; border: 1px solid rgba(242, 237, 226, .4); color: var(--ivory); cursor: pointer;
  font-size: 8px; letter-spacing: .3em; text-transform: uppercase; padding: 9px 14px;
}
.ccard .pick button:hover { border-color: var(--champ); color: var(--champ); }
.ccard .tagline { font-size: 10.5px; color: var(--mut); padding: 0 16px 14px; line-height: 1.8; }

/* skeleton — a loading state that reads as work happening, not a spinner */
.skel { position: absolute; inset: 0; background: rgba(242, 237, 226, .05); overflow: hidden; }
.skel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(201, 162, 39, .13) 50%, transparent 80%);
  transform: translateX(-100%); animation: shimmer 1.9s infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }
.skel .lbl-mid {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 8px; letter-spacing: .4em; text-transform: uppercase; color: var(--champ); text-align: center; padding: 0 20px;
}
.ccard .retry, .baslider .retry {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; text-align: center; padding: 20px; background: rgba(12, 11, 9, .6);
}
.ccard .retry p, .baslider .retry p { font-size: 10.5px; color: var(--mut); line-height: 1.8; max-width: 26ch; }
.ccard .retry button, .baslider .retry button {
  background: none; border: 1px solid var(--champ); color: var(--champ); cursor: pointer;
  font-size: 8px; letter-spacing: .3em; text-transform: uppercase; padding: 10px 18px;
}

/* ---------- status + banners ---------- */
.cl-status {
  display: flex; align-items: center; gap: 14px; margin-top: 26px;
  font-size: 9px; letter-spacing: .34em; text-transform: uppercase; color: var(--champ);
}
.cl-status .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--champ); animation: pulse 1.5s infinite; flex: none; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.note {
  border: 1px solid var(--hairl); border-left: 2px solid var(--champ);
  padding: 16px 20px; margin-top: 22px; font-size: 11px; color: var(--mut); line-height: 1.9;
}
.note.warn { border-left-color: #d08a5e; }
.note b { color: var(--ivory); font-weight: 400; }

/* delivery / booking panel after "Request my concept" */
.done-panel { border-top: 1px solid var(--hairl); margin-top: 34px; padding-top: 30px; }
.done-panel h3 { font-family: var(--serif); font-weight: 200; font-size: clamp(22px, 2.3vw, 32px); }
.done-panel p { font-size: 12px; color: var(--mut); line-height: 2; margin-top: 14px; max-width: 46ch; }
.done-panel .ctas { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; margin-top: 28px; }
.deliv { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 22px; }
.deliv span { font-size: 8px; letter-spacing: .32em; text-transform: uppercase; color: var(--mut); }
.deliv span b { color: var(--champ); font-weight: 400; }

/* admin-only integration warning — visible with ?admin=1 or ADMIN_TOKEN */
.admin-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 190;
  background: rgba(12, 11, 9, .95); border-top: 1px solid rgba(208, 138, 94, .5);
  padding: 14px 22px; font-size: 10px; color: var(--mut); line-height: 1.7;
  max-height: 42vh; overflow: auto;
}
.admin-bar b { color: #d08a5e; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; font-size: 8.5px; }
.admin-bar ul { margin: 8px 0 0; padding-left: 16px; }
.admin-bar li { margin: 4px 0; }
.admin-bar code { color: var(--champ); font-family: ui-monospace, Menlo, monospace; font-size: 10px; }
.admin-bar .x { position: absolute; top: 8px; right: 14px; background: none; border: none; color: var(--mut); cursor: pointer; font-size: 16px; }

/* modal additions */
.mbox .consent { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 20px; }
.mbox .consent input { margin-top: 3px; flex: none; }
.mbox .consent label { font-size: 10px; color: var(--mut); line-height: 1.7; }
.mbox .merr { font-size: 11px; color: #d08a5e; margin-bottom: 14px; }
.mbox .progress { display: flex; gap: 6px; margin: 18px 0 4px; }
.mbox .progress i { flex: 1; height: 2px; background: rgba(242, 237, 226, .15); }
.mbox .progress i.on { background: var(--champ); }

/* ---------- comparison sliders (hero + step III) ---------- */
.baslider .ba-lay { position: absolute; inset: 0; background: rgba(242, 237, 226, .04); }
.baslider .ba-lay .cap {
  position: absolute; left: 14px; bottom: 14px; z-index: 3;
  font-size: 7.5px; letter-spacing: .42em; text-transform: uppercase;
  color: rgba(242, 237, 226, .9); background: rgba(12, 11, 9, .55); padding: 8px 12px 7px;
}
.baslider .ba-before .cap { left: auto; right: auto; }
.baslider .skel { position: absolute; inset: 0; }
.baslider .retry { z-index: 6; }
.cmp { margin-top: 30px; }
.cmp-single { position: relative; aspect-ratio: 4/3; overflow: hidden; border: 1px solid rgba(242, 237, 226, .18); margin-top: 30px; }
.cmp-single img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cmp-single .cap {
  position: absolute; left: 14px; bottom: 14px; z-index: 3;
  font-size: 7.5px; letter-spacing: .42em; text-transform: uppercase;
  color: rgba(242, 237, 226, .9); background: rgba(12, 11, 9, .55); padding: 8px 12px 7px;
}

/* direction strip under the comparison */
.cmp-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; margin-top: 14px; }
.cthumb {
  position: relative; display: block; padding: 0; text-align: left; cursor: pointer;
  background: rgba(242, 237, 226, .04); border: 1px solid var(--hairl); color: var(--ivory);
  aspect-ratio: 4/3; overflow: hidden; transition: border-color .3s;
}
.cthumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1s cubic-bezier(.2, .6, .2, 1); }
.cthumb:hover img { transform: scale(1.04); }
.cthumb.active { border-color: var(--champ); }
.cthumb .skel { position: absolute; inset: 0; }
.cthumb .ct-name, .cthumb .ct-tag {
  position: absolute; left: 8px; z-index: 2; font-size: 7px; letter-spacing: .3em; text-transform: uppercase;
  background: rgba(12, 11, 9, .6); padding: 5px 7px 4px; color: rgba(242, 237, 226, .9);
}
.cthumb .ct-name { bottom: 8px; }
.cthumb .ct-tag { top: 8px; color: var(--champ); }
.cthumb.active .ct-name { color: var(--champ); }

/* step II: swatch becomes a thumbnail */
.theme-row .sw-img { position: relative; width: 98px; min-height: 62px; overflow: hidden; border: 1px solid var(--hairl); }
.theme-row .sw-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1s cubic-bezier(.2, .6, .2, 1); }
.theme-row:hover .sw-img img { transform: scale(1.05); }
.theme-row .sw-tag {
  position: absolute; left: 0; bottom: 0; z-index: 2; font-style: normal;
  font-size: 6.5px; letter-spacing: .28em; text-transform: uppercase; color: rgba(242, 237, 226, .8);
  background: rgba(12, 11, 9, .6); padding: 4px 6px 3px;
}
.theme-row.active { border-left: 2px solid var(--champ); padding-left: 16px; }
.theme-row.active .sw-img { border-color: var(--champ); }
.theme-row.on:not(.active) { border-left: 2px solid rgba(201, 162, 39, .35); padding-left: 16px; }
@media (max-width: 520px) { .theme-row .sw-img { width: 84px; min-height: 58px; } }

/* ---------- before/after snap toggle ---------- */
@property --pos { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
.ba-toggle { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 6; display: flex; border: 1px solid rgba(242, 237, 226, .35); background: rgba(12, 11, 9, .55); backdrop-filter: blur(6px); }
.ba-toggle button { background: none; border: 0; color: rgba(242, 237, 226, .75); cursor: pointer; font-size: 7.5px; letter-spacing: .36em; text-transform: uppercase; padding: 9px 14px 8px; }
.ba-toggle button + button { border-left: 1px solid rgba(242, 237, 226, .25); }
.ba-toggle button.on { color: var(--ink); background: var(--champ); }
.baslider .ba-tag { display: none; }               /* the toggle replaces the corner tags */

/* step III heading line */
.cmp-title { font-family: var(--serif); font-weight: 200; font-size: clamp(18px, 1.8vw, 24px); margin-top: 26px; min-height: 1em; }

/* uploaded photo strip: click to preview */
.thumb.active { border-color: var(--champ); box-shadow: 0 0 0 1px var(--champ); }
.thumb { cursor: pointer; }
.thumb-tag { position: absolute; left: 0; bottom: 0; font-size: 6.5px; letter-spacing: .28em; text-transform: uppercase; color: var(--ink); background: var(--champ); padding: 4px 6px 3px; }

/* rooms strip at the foot of step III */
.rooms { margin-top: 40px; border-top: 1px solid var(--hairl); padding-top: 26px; }
.rooms-lbl { margin-bottom: 14px; }
.rooms-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; }
.rthumb { position: relative; display: block; padding: 0; text-align: left; cursor: pointer; background: rgba(242, 237, 226, .04); border: 1px solid var(--hairl); color: var(--ivory); aspect-ratio: 4/3; overflow: hidden; transition: border-color .3s; }
.rthumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1s cubic-bezier(.2, .6, .2, 1); }
.rthumb:hover img { transform: scale(1.04); }
.rthumb.active { border-color: var(--champ); }
.rthumb .rt-name, .rthumb .rt-tag { position: absolute; left: 8px; z-index: 2; font-size: 7px; letter-spacing: .3em; text-transform: uppercase; background: rgba(12, 11, 9, .6); padding: 5px 7px 4px; color: rgba(242, 237, 226, .9); }
.rthumb .rt-name { bottom: 8px; }
.rthumb .rt-tag { top: 8px; color: var(--champ); }

/* share panel + shared view */
.share { border: 1px solid var(--hairl); border-left: 2px solid var(--champ); padding: 20px 22px; margin-top: 26px; }
.share p { font-size: 11.5px; color: var(--mut); line-height: 1.9; margin-top: 10px; max-width: 52ch; }
.share-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 16px; }
.share-row input { flex: 1 1 260px; min-width: 0; background: transparent; border: 1px solid var(--hairl); color: var(--ivory); padding: 11px 12px; font: 11px/1.4 ui-monospace, Menlo, monospace; }
.share-row button { background: none; border: 1px solid var(--champ); color: var(--champ); cursor: pointer; font-size: 8px; letter-spacing: .3em; text-transform: uppercase; padding: 11px 16px; }
.share-row button:hover { background: var(--champ); color: var(--ink); }
.share-banner { border: 1px solid var(--hairl); border-left: 2px solid var(--champ); padding: 26px 28px; margin-bottom: 8vh; }
.share-banner .serif { font-size: clamp(22px, 2.4vw, 34px); margin-top: 10px; }
.share-banner .serif em { color: var(--champ); }
.share-banner p { font-size: 12px; color: var(--mut); line-height: 1.9; margin-top: 12px; }
.share-banner a { color: var(--champ); }
body.share-mode .theme-row .cbrief { pointer-events: none; }
/* captions: before bottom-left, after bottom-right — never on top of each other */
.baslider .ba-lay:not(.ba-before) .cap { left: auto; right: 14px; }
.rooms-sub { font-size: 11px; color: var(--mut); margin: -4px 0 14px; line-height: 1.8; }
.rooms-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

/* lead popup: the consent line sits under the button, small and calm */
.mbox .mconsent { font-size: 10px; color: var(--mut); line-height: 1.7; margin: 14px 0 0; }
.mbox .btn.solid { width: 100%; text-align: center; }
.mok .btn { font-size: 9px; padding: 14px 22px 12px; }

/* a direction being rendered: shimmer over the thumbnail plus a small label */
.theme-row .sw-img.gen img { filter: saturate(.4) brightness(.55); }
.theme-row .sw-img.gen::before { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(242,237,226,.16) 50%, transparent 70%); background-size: 220% 100%; animation: swShimmer 1.6s linear infinite; }
@keyframes swShimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.theme-row .sw-load { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 5px 0 4px; font-size: 8px; letter-spacing: .22em; text-transform: uppercase; color: var(--ivory); background: rgba(12,11,9,.55); }
.theme-row .sw-load i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid rgba(242,237,226,.35); border-top-color: var(--champ); animation: swSpin .9s linear infinite; }
@keyframes swSpin { to { transform: rotate(360deg); } }
.theme-row .sw-img.mine { border-color: var(--champ); }
.theme-row .sw-img.just-ready { animation: swPop .9s cubic-bezier(.2,.7,.2,1); }
@keyframes swPop { 0% { box-shadow: 0 0 0 0 rgba(201,162,39,.7); } 100% { box-shadow: 0 0 0 14px rgba(201,162,39,0); } }
.theme-row.gen .sw-tag { display: none; }
.cthumb.gen img { filter: saturate(.4) brightness(.55); }
.cthumb.gen::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(110deg, transparent 30%, rgba(242,237,226,.16) 50%, transparent 70%); background-size: 220% 100%; animation: swShimmer 1.6s linear infinite; }
.cthumb.gen .skel { display: none; }

/* the thank-you state: a quiet pulse while renders run behind the popup */
.mok-spin { display: flex; gap: 8px; justify-content: center; margin: 18px 0 14px; }
.mok-spin i { width: 7px; height: 7px; border-radius: 50%; background: var(--champ); opacity: .25; animation: mokPulse 1.4s ease-in-out infinite; }
.mok-spin i:nth-child(2) { animation-delay: .2s; } .mok-spin i:nth-child(3) { animation-delay: .4s; }
@keyframes mokPulse { 0%, 100% { opacity: .25; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.15); } }
.mok-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
.mok-actions .btn { font-size: 9px; padding: 14px 24px 12px; }
.mok-actions .btn.solid { width: auto; }
.theme-row .sw-img.down img { filter: saturate(.3) brightness(.6); }

/* Step III photo stage: the visitor's photograph with a state veil over it */
.cmp-single.stage img { transition: filter .6s; }
.cmp-single.stage.loading img, .cmp-single.stage.failed img { filter: brightness(.55) saturate(.7); }
.cmp-single.stage.down img { filter: brightness(.5) saturate(.4); }
.cmp-single.stage .veil { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; gap: 10px; }
.cmp-single.stage .veil b { font-family: var(--serif); font-weight: 200; font-size: clamp(18px, 2vw, 26px); color: var(--ivory); line-height: 1.2; }
.cmp-single.stage .veil i { font-style: normal; font-size: 9px; letter-spacing: .28em; text-transform: uppercase; color: rgba(242, 237, 226, .7); }
.cmp-single.stage .ring { width: 38px; height: 38px; border-radius: 50%; border: 2px solid rgba(242, 237, 226, .22); border-top-color: var(--champ); animation: swSpin 1s linear infinite; margin-bottom: 6px; }
.cmp-single.stage .ico { font-size: 26px; color: var(--champ); line-height: 1; margin-bottom: 4px; }
.cmp-single.stage.down .veil { background: radial-gradient(60% 60% at 50% 50%, rgba(12, 11, 9, .55), rgba(12, 11, 9, 0)); }
.cmp-single.stage.down .veil b { color: var(--champ); }
/* photo thumbnails under Step III */
.cthumb.photo .ct-tag { color: var(--champ); }
.cthumb.photo.gen::after { content: ""; position: absolute; right: 8px; bottom: 8px; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid rgba(242,237,226,.35); border-top-color: var(--champ); animation: swSpin .9s linear infinite; z-index: 2; }

/* the After half while there is no render yet: a state, not an empty box */
.skel .skel-in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 0 24px; text-align: center; z-index: 1; }
.skel .skel-in .lbl-mid { position: static; inset: auto; padding: 0; font-family: var(--serif); font-weight: 200; font-size: clamp(17px, 1.9vw, 24px); letter-spacing: 0; text-transform: none; color: var(--ivory); line-height: 1.25; }
.skel .skel-in .lbl-sub { font-size: 8.5px; letter-spacing: .32em; text-transform: uppercase; color: var(--champ); }
.skel .ring { width: 38px; height: 38px; border-radius: 50%; border: 2px solid rgba(242, 237, 226, .2); border-top-color: var(--champ); animation: swSpin 1s linear infinite; margin-bottom: 4px; }
.skel .ico { font-size: 26px; color: var(--champ); line-height: 1; margin-bottom: 2px; }
.skel.down, .skel.failed, .skel.idle { background: rgba(12, 11, 9, .55); }
.skel.down::after, .skel.failed::after, .skel.idle::after { animation: none; transform: none; opacity: 0; }
.skel.down .lbl-mid { color: var(--champ); }
.skel.idle .lbl-mid { font-size: clamp(14px, 1.4vw, 18px); color: rgba(242, 237, 226, .8); }

/* Step III state message: a solid card in the middle of the After half, so
   it reads at a glance over any photograph or shimmer */
.skel .skel-in {
  inset: auto; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(86%, 440px); padding: 24px 26px 22px; gap: 12px;
  background: rgba(12, 11, 9, .84); border: 1px solid rgba(201, 162, 39, .4);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.skel .skel-in .lbl-mid { font-size: clamp(19px, 2.1vw, 27px); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.skel .skel-in .lbl-sub { font-size: 9.5px; letter-spacing: .28em; color: var(--champ); line-height: 1.6; }
.skel.idle .lbl-mid { font-size: clamp(16px, 1.6vw, 21px); color: #fff; }
.skel.down .lbl-mid { color: #fff; }
.skel.down .ico, .skel.failed .ico { font-size: 30px; }
.skel .ring { width: 42px; height: 42px; border-width: 2.5px; }
/* image captions: larger, on a solid chip */
.baslider .ba-lay .cap { font-size: 9px; letter-spacing: .32em; color: #fff; background: rgba(12, 11, 9, .78); padding: 9px 13px 8px; }

/* Step II + Step III fit one desktop screen: nothing under the image while
   browsing, and the comparison caps its height to the viewport */
#conceptNote { display: none !important; }
.cmp { margin-top: 18px; max-width: 100%; max-height: calc(100vh - 290px); min-height: 300px; }
.cmp-title { margin-top: 10px; }
@media (max-width: 900px) { .cmp { max-height: none; min-height: 0; } }

/* ---- the visitor's own direction ---- */
.theme-row.theme-custom { align-items: flex-start; }
.theme-row.theme-custom > div:first-child { flex: 1; min-width: 0; }
.theme-row .cbrief { position: relative; margin-top: 10px; display: none; }
.theme-row.theme-custom.active .cbrief, .theme-row.theme-custom.on .cbrief, .theme-row.theme-custom.has-brief .cbrief { display: block; }
.theme-row .cbrief textarea, .fbrief textarea { display: block; width: 100%; box-sizing: border-box; resize: vertical; min-height: 58px; background: rgba(242,237,226,.04); border: 1px solid var(--hairl); color: var(--ivory); font-family: var(--sans); font-weight: 300; font-size: 13px; line-height: 1.55; padding: 10px 56px 10px 12px; outline: none; border-radius: 0; transition: border-color .4s, background .4s; }
.theme-row .cbrief textarea:focus, .fbrief textarea:focus { border-color: var(--champ); background: rgba(242,237,226,.07); }
.theme-row .cbrief textarea::placeholder, .fbrief textarea::placeholder { color: rgba(242,237,226,.38); }
.cbrief-n { position: absolute; right: 10px; bottom: 8px; font-size: 9px; letter-spacing: .14em; color: var(--mut); pointer-events: none; }
.cbrief-n i { font-style: normal; color: var(--champ); }
.theme-row .sw-custom { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 98px; min-height: 62px; border: 1px dashed rgba(201,162,39,.55); background: rgba(201,162,39,.06); color: var(--champ); }
.theme-row .sw-custom b { font-family: var(--serif); font-weight: 300; font-size: 26px; line-height: 1; }
.theme-row .sw-custom small { font-size: 8px; letter-spacing: .28em; text-transform: uppercase; }
.theme-row.theme-custom.active .sw-custom { border-style: solid; border-color: var(--champ); }
.fbrief { position: relative; margin-top: 14px; }
.fbrief label { display: block; font-size: 9px; font-weight: 500; letter-spacing: .34em; text-transform: uppercase; color: var(--champ); margin-bottom: 8px; }
.fstyle.fcustom img { display: none; }
.fstyle.fcustom .fplus { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; border: 1px dashed rgba(201,162,39,.55); background: rgba(201,162,39,.06); color: var(--champ); font-family: var(--serif); font-weight: 300; font-size: 34px; }
.fstyle.fcustom.active .fplus { border-style: solid; border-color: var(--champ); }
/* Step III while the brief is being written: words, not a borrowed picture */
.cmp-brief { display: flex; flex-direction: column; justify-content: center; gap: 14px; min-height: 300px; padding: clamp(22px, 4vw, 48px); border: 1px dashed rgba(201,162,39,.5); background: rgba(201,162,39,.05); }
.cmp-brief .serif { font-size: clamp(22px, 2vw, 30px); line-height: 1.15; color: var(--ivory); }
.cmp-brief .serif em { color: var(--champ); font-style: italic; }
.cmp-brief p { font-size: 13px; line-height: 1.8; color: rgba(242,237,226,.78); max-width: 52ch; margin: 0; }
.cmp-brief blockquote { margin: 0; padding: 12px 16px; border-left: 2px solid var(--champ); font-family: var(--serif); font-size: 16px; line-height: 1.45; color: var(--ivory); }
.cthumb.custom-ph { display: flex; align-items: center; justify-content: center; }
.cthumb.custom-ph .fplus { font-family: var(--serif); font-size: 28px; color: var(--champ); }

/* the way back to a saved session, on a plain visit */
.resume-link { display: block; margin-top: 12px; font-size: 12px; letter-spacing: .02em; color: var(--mut); text-decoration: none; }
.resume-link u { color: var(--champ); text-decoration: none; border-bottom: 1px solid rgba(201,162,39,.5); }
.resume-link:hover u { border-bottom-color: var(--champ); }