/* ---------- Infrastructure: the admin map (IN.TANGIBLE / 04) ----------
   Reuses the Campaigns map frame (.cm-map, .cm-track, .cm-station, .cm-stage, .dev-phone, .dev-card).
   Everything here is the admin portal drawn in the stage's em unit. */
.im .cm-stage { font-family:'Outfit', var(--body-font); }
.im-src .cm-node { border-color:var(--bronze); }
.im-src.is-live .cm-node { background:var(--bronze); }
.im-src .cm-idx { color:var(--bronze); }

/* chapter menu: four chapters */
.chapter-nav { grid-template-columns:repeat(4,1fr); }
@media(max-width:680px) { .chapter-nav a { padding:21px 2px; font-size:9px; letter-spacing:.02em; } }

/* the admin window */
.im-win { position:absolute; left:0; top:2.5em; width:100%; height:46em; background:#fff; border-radius:1em; overflow:hidden; box-shadow:0 2.6em 5.2em -2em rgba(24,20,14,.34), 0 .4em 1em rgba(24,20,14,.08); }
.im-win .br-bar { height:3.2em; }
.im-win .br-url { font-size:1.05em; }
.im-mast { padding:2em 2.6em 0; }
.im-brand { display:flex; align-items:baseline; gap:1.2em; padding-bottom:1.1em; border-bottom:1px solid rgba(26,26,26,.34); }
.im-wm { font-weight:700; font-size:1.35em; letter-spacing:.34em; text-transform:uppercase; color:#1a1a1a; }
.im-wm span { color:#8a8a8a; }
.im-studio { margin-left:auto; font-size:.95em; letter-spacing:.14em; text-transform:uppercase; color:#8a8a8a; white-space:nowrap; }
.im-nav { display:flex; gap:1.9em; padding:1.05em 0 0; font-size:1.15em; color:#8a8a8a; }
.im-nav b { font-weight:500; color:#1a1a1a; box-shadow:0 .16em 0 #1a1a1a; }
.im-body { padding:2.2em 2.6em 0; color:#1a1a1a; }
.im-h { font-size:2.5em; font-weight:700; letter-spacing:-.01em; line-height:1.1; }
.im-sub { font-size:1.1em; color:#8a8a8a; margin-top:.5em; }
.im-head2 { display:flex; justify-content:space-between; align-items:baseline; font-size:1.3em; font-weight:700; padding-bottom:.6em; border-bottom:1px solid #1a1a1a; }
.im-head2 span { font-size:.78em; font-weight:500; color:#8a8a8a; }
.im-lea { --lea:#9b7b56; }

/* Record: the client */
.im-rec { display:grid; grid-template-columns:24em 1fr; gap:3em; }
.im-chips { display:flex; flex-wrap:wrap; gap:.6em; margin:1.3em 0 1.7em; }
.im-chips i { font-style:normal; font-size:.95em; padding:.35em .8em; border:1px solid rgba(26,26,26,.16); color:#555; }
.im-chips i.on { border-color:#6b7f66; color:#6b7f66; }
.im-facts { display:grid; grid-template-columns:1fr 1fr; gap:1.5em 1.4em; }
.im-facts b { display:block; font-size:2.2em; font-weight:700; letter-spacing:-.035em; line-height:1.1; font-variant-numeric:tabular-nums; }
.im-facts span { display:block; font-size:.95em; color:#8a8a8a; margin-top:.25em; }
.im-note { margin-top:2em; padding-left:.9em; border-left:.18em solid var(--lea); font-size:1.05em; line-height:1.5; color:#333; }
.im-note small { display:block; font-size:.82em; letter-spacing:.12em; text-transform:uppercase; color:#8a8a8a; margin-bottom:.3em; }
.im-tl { list-style:none; margin:0; padding:0; }
.im-tl li { display:grid; grid-template-columns:6.4em 7.4em 1fr; align-items:baseline; gap:.8em; padding:.95em 0 .95em .9em; border-bottom:1px solid rgba(26,26,26,.1); font-size:1.08em; border-left:.18em solid transparent; }
.im-tl time { color:#8a8a8a; font-size:.92em; font-variant-numeric:tabular-nums; }
.im-tl em { font-style:normal; font-size:.82em; letter-spacing:.12em; text-transform:uppercase; color:#8a8a8a; }
.im-tl .new { animation:im-row 12s cubic-bezier(.3,0,.2,1) infinite both; animation-delay:calc(var(--d) * 1.3s); }
@keyframes im-row {
  0% { opacity:0; transform:translateX(-1.2em); border-left-color:var(--lea); background:rgba(155,123,86,.08); }
  5% { opacity:1; transform:none; }
  22% { border-left-color:var(--lea); background:rgba(155,123,86,.08); }
  32%, 90% { opacity:1; transform:none; border-left-color:transparent; background:transparent; }
  97%, 100% { opacity:0; transform:none; }
}

/* WhatsApp: the conversation */
.im-wa .ph-screen { background:#efeae2; }
.wa-head { position:absolute; top:4.4em; left:0; right:0; height:5em; display:flex; align-items:center; gap:.9em; padding:0 1.4em; background:#f7f5f1; border-bottom:1px solid rgba(0,0,0,.06); z-index:4; }
.wa-av { width:3em; height:3em; border-radius:50%; background:#1a1a1a; color:#fff; display:grid; place-items:center; font:600 1.1em/1 var(--mark-font); }
.wa-who b { display:block; font-size:1.2em; font-weight:600; }
.wa-who small { display:block; font-size:.9em; color:#667781; }
.wa-feed { position:absolute; top:9.8em; left:0; right:0; bottom:0; padding:.9em 1.1em; display:flex; flex-direction:column; gap:.6em; }
.wa-day { align-self:center; font-size:.85em; color:#54656f; background:#fff; padding:.3em .8em; border-radius:.5em; box-shadow:0 .1em .1em rgba(0,0,0,.06); }
.wa-msg { max-width:80%; padding:.6em .85em .5em; font-size:1em; line-height:1.35; border-radius:.75em; box-shadow:0 .1em .15em rgba(0,0,0,.08); animation:im-msg 14s ease infinite both; animation-delay:calc(var(--m) * 1.25s); }
.wa-msg small { display:block; text-align:right; font-size:.72em; color:#667781; margin-top:.2em; }
.wa-in { align-self:flex-start; background:#fff; border-top-left-radius:.2em; }
.wa-out { align-self:flex-end; background:#d9fdd3; border-top-right-radius:.2em; }
.wa-btns { display:flex; flex-direction:column; gap:.3em; margin-top:.5em; }
.wa-btns i { font-style:normal; display:block; text-align:center; font-size:.95em; color:#027eb5; padding:.45em; border-top:1px solid rgba(0,0,0,.08); }
@keyframes im-msg {
  0% { opacity:0; transform:translateY(.8em); }
  4%, 90% { opacity:1; transform:none; }
  97%, 100% { opacity:0; transform:none; }
}
.im-hand { align-self:center; width:27em; padding:2em 2.2em 2.2em; animation:im-msg 14s ease infinite both; animation-delay:8.4s; }
.im-hand .im-wm { font-size:1.05em; }
.im-hand .im-brand { padding-bottom:.9em; }
.im-hand h4 { font-size:1.55em; font-weight:700; margin:1.4em 0 1.1em; }
.im-person { display:grid; grid-template-columns:3.4em 1fr; gap:1em; align-items:center; }
.im-ini { width:3.4em; height:3.4em; border-radius:50%; background:var(--lea); color:#fff; display:grid; place-items:center; font-size:1.05em; font-weight:600; }
.im-person b { display:block; font-size:1.25em; }
.im-person > span:not(.im-ini) span { display:block; font-size:.95em; color:#8a8a8a; }
.im-hand p { font-size:1.08em; line-height:1.45; color:#333; margin:1.3em 0 1.3em; padding-left:.9em; border-left:.18em solid var(--lea); }
.im-to { display:flex; justify-content:space-between; align-items:center; font-size:.95em; color:#8a8a8a; padding-top:1em; border-top:1px solid rgba(26,26,26,.1); }
.im-to b { font-weight:500; color:#fff; background:#1a1a1a; padding:.4em .9em; }

/* Calendar: the visit */
.im-cal { --row:2.7em; display:grid; grid-template-columns:4.2em repeat(6,1fr); margin-top:1.2em; font-size:1em; }
.im-cal > span { font-size:.95em; color:#8a8a8a; padding:.3em .5em .7em; border-bottom:1px solid #1a1a1a; }
.im-cal > span b { display:block; font-size:1.6em; font-weight:700; color:#1a1a1a; letter-spacing:-.02em; }
.im-cal > span.today b { color:var(--lea); }
.im-hours { grid-column:1; grid-row:2; display:flex; flex-direction:column; }
.im-hours i { font-style:normal; height:var(--row); font-size:.9em; line-height:1; color:#8a8a8a; padding-top:.35em; }
.im-day { grid-row:2; position:relative; border-left:1px solid rgba(26,26,26,.08); background:repeating-linear-gradient(to bottom, transparent 0 calc(var(--row) - 1px), rgba(26,26,26,.07) calc(var(--row) - 1px) var(--row)); height:calc(9 * var(--row)); }
.im-ev { position:absolute; left:.35em; right:.35em; top:calc(var(--t) * var(--row) + .15em); height:calc(var(--h) * var(--row) - .3em); display:flex; align-items:center; gap:.4em; padding:0 .55em; background:#f4f3ef; border-left:.2em solid #c9c6bd; font-size:.92em; line-height:1.2; white-space:nowrap; overflow:hidden; }
.im-ev b { font-weight:600; }
.im-ev span { color:#8a8a8a; }
.im-ev.dark { background:#1a1a1a; color:#fff; border-left-color:#1a1a1a; }
.im-ev.dark span { color:#bdbdbd; }
.im-ev.lea { background:#f3ece4; border-left-color:var(--lea); animation:im-pop 9s cubic-bezier(.3,0,.2,1) infinite both; animation-delay:.8s; }
@keyframes im-pop {
  0% { opacity:0; transform:scale(.9); box-shadow:0 0 0 0 rgba(155,123,86,.5); }
  6% { opacity:1; transform:none; }
  20% { box-shadow:0 0 0 .6em rgba(155,123,86,0); }
  92% { opacity:1; transform:none; }
  98%, 100% { opacity:0; }
}

/* Event: the invitation */
.ev-card { background:#e4e3df; }
.ev-art { position:absolute; inset:0; width:100%; height:100%; }
.ev-relief { transition:opacity 1.4s ease; }
.ev-3d { position:absolute; left:0; top:13.5em; width:100%; height:16em; opacity:0; transition:opacity 1.4s ease; }
.ev-shadow { position:absolute; left:24%; right:24%; top:26.6em; height:2em; border-radius:50%; background:radial-gradient(closest-side, rgba(60,55,45,.22), rgba(60,55,45,0)); opacity:0; transition:opacity 1.4s ease; }
.ev-card.is-3d .ev-relief { opacity:0; }
.ev-card.is-3d .ev-3d, .ev-card.is-3d .ev-shadow { opacity:1; }
.ev-top { position:absolute; left:1.7em; right:1.4em; top:5.4em; color:#7a7a76; }
.ev-top b { display:block; font:400 2.5em/1 'Marcellus', 'Optima', serif; letter-spacing:.06em; color:#80807b; }
.ev-top p { font:300 .98em/1.42 'Lato', var(--body-font); margin-top:.75em; }
.ev-top em { font-style:italic; }
.ev-when { position:absolute; left:2.375em; right:2.375em; top:42.75em; display:flex; justify-content:space-between; font:300 .8em/1.45 'Lato', var(--body-font); white-space:nowrap; color:#7a7a76; }
.ev-when span + span { text-align:right; }
.ev-rsvp { position:absolute; left:1.7em; right:1.7em; top:38.9em; height:5.8em; }
.ev-rsvp > div { position:absolute; inset:0; display:flex; flex-direction:column; gap:.55em; }
.ev-rsvp i { font-style:normal; display:block; text-align:center; font:300 .95em/1 'Lato', var(--body-font); letter-spacing:.08em; padding:.85em; border:1px solid #9a9993; color:#6f6f6a; }
.ev-rsvp i.yes { background:#7c7b76; border-color:#7c7b76; color:#f1f0ec; animation:im-tap 10s ease infinite both; }
.ev-thanks { justify-content:center; align-items:center; text-align:center; font:300 .95em/1.4 'Lato', var(--body-font); color:#7a7a76; animation:im-thanks 10s ease infinite both; }
.ev-thanks b { display:block; font:400 1.2em/1.25 'Marcellus', 'Optima', serif; color:#6f6f6a; margin-bottom:.2em; }
.ev-ask { animation:im-ask 10s ease infinite both; }
@keyframes im-tap { 0%, 30% { transform:none; } 33% { transform:scale(.96); } 36%, 100% { transform:none; } }
@keyframes im-ask { 0%, 38% { opacity:1; } 42%, 94% { opacity:0; } 98%, 100% { opacity:1; } }
@keyframes im-thanks { 0%, 40% { opacity:0; } 45%, 92% { opacity:1; } 96%, 100% { opacity:0; } }
.im-evcard { align-self:center; width:27em; padding:2em 2.2em 2.2em; }
.im-evcard .im-wm { font-size:1.05em; }
.im-evcard .im-brand { padding-bottom:.9em; }
.im-evcard h4 { font-size:1.55em; font-weight:700; margin:1.4em 0 .2em; }
.im-evcard > span { display:block; font-size:.98em; color:#8a8a8a; }
.im-tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:1em; margin:1.6em 0 1.4em; }
.im-tiles b { display:block; position:relative; height:1.15em; font-size:2.6em; font-weight:700; letter-spacing:-.035em; line-height:1.15; font-variant-numeric:tabular-nums; }
.im-tiles span { display:block; font-size:.92em; color:#8a8a8a; margin-top:.3em; }
.im-flip u, .im-flip s { position:absolute; left:0; top:0; text-decoration:none; }
.im-flip u { animation:im-ask 10s ease infinite both; }
.im-flip s { color:var(--lea); animation:im-thanks 10s ease infinite both; }
.im-guest { display:grid; grid-template-columns:2.8em 1fr auto; gap:.9em; align-items:center; padding:.9em 0; border-top:1px solid rgba(26,26,26,.1); font-size:1em; }
.im-guest .im-ini { width:2.8em; height:2.8em; font-size:.9em; }
.im-guest em { font-style:normal; font-size:.88em; color:#6b7f66; animation:im-thanks 10s ease infinite both; }

/* Pre-order: the lookbook on the showroom tablet */
.dev-tablet { position:absolute; left:0; top:4em; width:100%; height:44em; background:#141414; border-radius:2.6em; padding:1.5em; box-shadow:0 2.6em 5.2em -2em rgba(24,20,14,.4), 0 .4em 1em rgba(24,20,14,.12), inset 0 0 0 .12em #3a3a3a; }
.dev-tablet::before { content:""; position:absolute; top:50%; left:.55em; width:.5em; height:.5em; margin-top:-.25em; border-radius:50%; background:#2a2a2a; }
.tb-screen { position:relative; width:100%; height:100%; border-radius:1.2em; overflow:hidden; background:#fff; display:flex; flex-direction:column; }
.lb-bar { display:flex; align-items:baseline; gap:1.6em; padding:1.3em 1.8em 1.1em; border-bottom:1px solid rgba(26,26,26,.1); font-size:1em; }
.lb-bar .wm { font-size:1.25em; }
.lb-bar span { color:#8a8a8a; font-size:.95em; }
.lb-bar em { margin-left:auto; font-style:normal; font-size:.95em; }
.lb-view { flex:1; display:grid; grid-template-columns:1fr 17em; min-height:0; }
.lb-mains { position:relative; background:#f4f3ef; overflow:hidden; }
.lb-main { position:absolute; inset:0; margin:0; animation:lb-show 12s ease infinite both; animation-delay:calc(var(--k) * 3s); }
.lb-main img { object-fit:contain; }
.lb-side { position:relative; padding:2em 1.8em; }
.lb-info { position:absolute; left:1.8em; right:1.8em; top:2em; animation:lb-show 12s ease infinite both; animation-delay:calc(var(--k) * 3s); }
.lb-info small { display:block; font-size:.85em; letter-spacing:.14em; text-transform:uppercase; color:#8a8a8a; }
.lb-info b { display:block; font:400 1.9em/1.15 var(--mark-font); letter-spacing:-.02em; margin:.45em 0 .3em; }
.lb-info span { font-size:1.05em; color:#555; }
.lb-sizes { display:flex; gap:.5em; margin-top:9.6em; }
.lb-sizes i { font-style:normal; flex:1; text-align:center; font-size:.92em; padding:.55em 0; border:1px solid rgba(26,26,26,.18); }
.lb-sizes i.on { border-color:#1a1a1a; }
.lb-add { margin-top:.9em; text-align:center; font-size:.98em; padding:.85em; background:#1a1a1a; color:#fff; }
.lb-client { margin-top:1em; font-size:.88em; color:var(--lea); }
.lb-strip { position:relative; flex:none; height:9.4em; padding:1em 0 1em 1.2em; border-top:1px solid rgba(26,26,26,.1); overflow:hidden; background:#fff; }
.lb-strip::after { content:""; position:absolute; left:.95em; top:.75em; width:6.1em; height:7.9em; border:1px solid #1a1a1a; pointer-events:none; }
.lb-track { display:flex; gap:.8em; height:100%; animation:lb-slide 12s cubic-bezier(.4,0,.2,1) infinite both; }
.lb-th { flex:none; width:5.6em; height:100%; overflow:hidden; background:#f4f3ef; }
@keyframes lb-show { 0% { opacity:0; } 3%, 25% { opacity:1; } 28%, 100% { opacity:0; } }
@keyframes lb-slide { 0%, 22% { transform:none; } 25%, 47% { transform:translateX(-6.4em); } 50%, 72% { transform:translateX(-12.8em); } 75%, 97% { transform:translateX(-19.2em); } 100% { transform:none; } }

/* Metrics: every channel */
.mt-head { display:flex; justify-content:space-between; align-items:baseline; margin:1.5em 0 .6em; font-size:1em; color:#8a8a8a; }
.mt-head b { color:#1a1a1a; font-weight:700; font-size:1.25em; }
.mt-head em { font-style:normal; font-size:.88em; }
.mt-rows { list-style:none; margin:0; padding:0; }
.mt-rows li { display:grid; grid-template-columns:2.2em 7.4em 8.6em 1fr; align-items:center; gap:.6em; padding:.78em 0; border-top:1px solid rgba(26,26,26,.1); font-size:1.02em; }
.mt-rows svg { width:1.9em; height:1.9em; fill:none; stroke:#1a1a1a; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.mt-rows b { font-weight:500; }
.mt-v { font-weight:700; font-variant-numeric:tabular-nums; }
.mt-v small { font-weight:500; font-size:.82em; color:#8a8a8a; margin-left:.4em; }
.mt-bar { height:.45em; background:#efeee9; }
.mt-bar i { display:block; height:100%; width:calc(var(--v) * 100%); background:#cfcbc2; transform-origin:0 50%; transform:scaleX(.05); transition:transform 1.1s cubic-bezier(.3,0,.2,1); transition-delay:calc(var(--d) * 70ms); }
.mt-rows li:first-child .mt-bar i { background:var(--lea); }
.im-end.is-live .mt-bar i { transform:none; }

/* Metrics: the numbers */
.im-met { align-self:center; width:100%; padding:2.2em 2.4em 2.4em; }
.im-met .im-wm { font-size:1.05em; }
.im-met .im-brand { padding-bottom:.9em; }
.im-met .im-tiles { margin:1.6em 0 1.8em; }
.im-met .im-tiles b { font-size:2.3em; }
.im-bars { display:flex; align-items:flex-end; gap:.8em; height:11em; padding-bottom:.2em; border-bottom:1px solid #1a1a1a; }
.im-bars i { flex:1; height:calc(var(--v) * 100%); background:#d9d6ce; transform-origin:50% 100%; transform:scaleY(.08); transition:transform 1.1s cubic-bezier(.3,0,.2,1); transition-delay:calc(var(--d) * 80ms); }
.im-bars i:last-child { background:var(--lea); }
.im-end.is-live .im-bars i { transform:none; }
.im-axis { display:flex; justify-content:space-between; font-size:.85em; color:#8a8a8a; margin-top:.5em; }
.im-met p { font-size:1.02em; color:#555; line-height:1.45; margin-top:1.4em; }

/* under each screen: what feeds it */
.im-feeds { list-style:none; margin:calc(2.6 * var(--u)) 0 0; padding:0 0 0 25px; display:flex; flex-direction:column; gap:7px; }
.im-feeds li { font:400 12px/1.4 var(--body-font); }
.im-feeds b { font-weight:400; color:#161616; }
.im-feeds span { color:#6f6f69; }

@media (prefers-reduced-motion: reduce) {
  .im-tl .new, .wa-msg, .im-hand, .im-ev.lea, .ev-rsvp i.yes, .ev-ask, .ev-thanks, .im-flip u, .im-flip s, .im-guest em, .lb-main, .lb-info, .lb-track { animation:none !important; }
  .lb-main + .lb-main, .lb-info + .lb-info { opacity:0; }
  .mt-bar i { transform:none; transition:none; }
  .ev-thanks, .im-flip u { opacity:0; }
  .im-bars i { transform:none; transition:none; }
}