/* /discretion: a private file. The hero holds words back until you look;
   then four layers of protection drawn as rings around you, a contact sheet
   that clears when you approve someone, a map you can draw a hidden zone on,
   the block and report sheet, every protection filed by level, and three
   promises about your data set large.
   Builds on landing.css, pages.css and system.css (tokens). */

.dc-h { margin: var(--space-3) 0 var(--space-5); font-family: var(--type-serif); font-weight: 400; font-size: var(--fs-h2); line-height: 1.04; letter-spacing: -0.025em; color: var(--text-1); }
.dc-h em, .dc-title em, .dc-vows em { font-family: var(--type-display); font-style: italic; font-weight: 300; background: var(--accent-text); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: 0.06em; }
.dc-kicker { display: inline-block; font-family: var(--type-serif); font-size: var(--fs-label); letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-gold-bright); }
.dc-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; margin-bottom: var(--space-7); }
.dc-head > p, .dc-p { max-width: 44ch; margin: 0 0 var(--space-3); font-family: var(--type-serif); font-size: var(--fs-lg); line-height: var(--lh-body); color: var(--text-2); }
.dc-points { margin: var(--space-5) 0 0; padding: 0; list-style: none; max-width: 48ch; }
.dc-points li { padding: var(--space-3) 0; border-top: 1px solid var(--border-1); font-family: var(--type-serif); font-size: var(--fs-md); line-height: 1.6; color: var(--text-2); }
.dc-points b { font-weight: 400; color: var(--text-1); }
.dc-points a, .dc-panel a, .dc-vows a { color: var(--c-gold-bright); text-decoration: underline; text-underline-offset: 3px; }
.dc-tier { display: inline-flex; margin-top: var(--space-5); padding: 6px 12px; border-radius: var(--radius-pill); font-family: var(--type-serif); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-1); box-shadow: inset 0 0 0 1px rgba(242, 236, 223, 0.3); }
.dc-tier--black { color: var(--tier-black); box-shadow: inset 0 0 0 1px rgba(176, 68, 95, 0.55); }
.dc-note { margin: var(--space-4) 0 0; text-align: center; font-family: var(--type-serif); font-size: var(--fs-xs); color: var(--text-3); }
.dc-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.dc-actions--center { justify-content: center; }

/* ---------- the hero: a private file ---------- */
.dc-hero { position: relative; isolation: isolate; overflow: hidden; padding: 130px 0 var(--section-y); background: radial-gradient(ellipse 50% 50% at 78% 50%, rgba(74, 44, 82, 0.45), transparent 72%), radial-gradient(ellipse 58% 44% at 15% 70%, var(--wash-forest), transparent 72%), linear-gradient(180deg, var(--noir) 0%, #0e0c11 55%, var(--noir) 100%); }
.dc-hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(48px, 7vw, 110px); align-items: center; }
.dc-hero .dc-kicker { display: block; margin-top: var(--space-6); }
.dc-title { margin: var(--space-4) 0 0; font-family: var(--type-serif); font-weight: 400; font-size: clamp(52px, 6.4vw, 100px); line-height: 0.98; letter-spacing: -0.03em; color: var(--text-1); }
.dc-title em { display: block; }
.dc-lede { max-width: 42ch; margin: var(--space-6) 0 0; font-family: var(--type-serif); font-size: clamp(19px, 1.6vw, 22px); line-height: 1.7; color: rgba(242, 236, 223, 0.85); }
/* words held back: a bar until you point at them */
.dc-redact { position: relative; padding: 0 2px; border-radius: 2px; color: transparent; background: rgba(242, 236, 223, 0.82); cursor: help; outline: none; transition: color var(--dur-3) ease, background var(--dur-3) ease; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.dc-redact:hover, .dc-redact:focus, .dc-redact.shown { color: var(--c-gold-bright); background: rgba(199, 166, 92, 0.12); }
.dc-redact:focus-visible { box-shadow: 0 0 0 2px var(--c-gold-bright); }
.dc-file { position: relative; justify-self: end; width: min(430px, 100%); margin-top: 90px; transform: rotate(2deg); transition: transform var(--dur-4) var(--ease-out); }
.dc-file:hover { transform: rotate(0deg) translateY(-6px); }
.dc-file-tab { position: absolute; left: 0; top: -32px; height: 34px; padding: 9px 20px 0; border-radius: 14px 14px 0 0; font-family: var(--type-serif); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-gold-bright); background: #1d1820; box-shadow: inset 0 1px 0 rgba(228, 198, 135, 0.25); }
.dc-file-body { padding: var(--space-6) var(--space-6) var(--space-7); border-radius: 0 var(--radius-lg) var(--radius-lg) var(--radius-lg); background: radial-gradient(ellipse 80% 60% at 100% 0%, rgba(74, 44, 82, 0.45), transparent 70%), linear-gradient(165deg, #1d1820, #110e13); box-shadow: var(--shadow-4), inset 0 0 0 1px rgba(228, 198, 135, 0.22); }
.dc-file-label { font-family: var(--type-serif); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-3); }
.dc-file dl { margin: var(--space-4) 0 0; }
.dc-file dl div { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 13px 0; border-bottom: 1px dashed rgba(228, 198, 135, 0.18); }
.dc-file dt { font-family: var(--type-serif); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); }
.dc-file dd { margin: 0; flex: 1; text-align: right; font-family: var(--type-serif); font-size: 17px; color: var(--text-1); }
.dc-file .bar { display: inline-block; width: var(--w); height: 13px; border-radius: 2px; background: rgba(242, 236, 223, 0.82); vertical-align: middle; }
.dc-file-foot { display: block; margin-top: var(--space-5); font-family: var(--type-display); font-style: italic; font-size: 22px; background: var(--accent-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dc-file-seal { position: absolute; right: 26px; bottom: -26px; display: grid; place-items: center; width: 70px; height: 70px; border-radius: 50%; background: var(--wax); box-shadow: 0 0 0 4px rgba(90, 19, 38, 0.5), 0 10px 20px rgba(0, 0, 0, 0.5); transform: rotate(-12deg); }
.dc-file-seal img { width: 60%; filter: sepia(1) saturate(2.2) hue-rotate(-12deg) brightness(1.05); opacity: 0.9; }

/* ---------- the layers: rings around you ---------- */
.dc-layers { padding: var(--section-y) 0; scroll-margin-top: 70px; background: radial-gradient(ellipse 58% 44% at 25% 50%, var(--wash-gold), transparent 72%), linear-gradient(180deg, var(--noir) 0%, var(--tint-gold) 50%, var(--noir) 100%); }
.dc-layers-grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(48px, 7vw, 110px); align-items: center; }
.dc-rings { position: relative; width: min(500px, 100%); aspect-ratio: 1; justify-self: center; }
.dc-ring { position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%); border: 1px solid rgba(228, 198, 135, 0.18); background: radial-gradient(circle, transparent 60%, rgba(199, 166, 92, 0.03)); transition: border-color var(--dur-4) ease, box-shadow var(--dur-4) ease, background var(--dur-4) ease; }
.dc-ring[data-ring="4"] { width: 100%; height: 100%; }
.dc-ring[data-ring="3"] { width: 78%; height: 78%; }
.dc-ring[data-ring="2"] { width: 56%; height: 56%; }
.dc-ring[data-ring="1"] { width: 34%; height: 34%; }
.dc-ring.on { border-color: var(--c-gold-bright); background: radial-gradient(circle, transparent 55%, rgba(199, 166, 92, 0.12)); box-shadow: 0 0 40px rgba(199, 166, 92, 0.18), inset 0 0 30px rgba(199, 166, 92, 0.08); }
/* a bead travels the active ring */
.dc-ring.on::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; background: radial-gradient(circle at 50% 0, var(--c-gold-bright) 0 4px, transparent 5px); animation: dcOrbit 9s linear infinite; }
.dc-ring[data-ring="1"].on::after { inset: -5px; }
@keyframes dcOrbit { to { transform: rotate(360deg); } }
.dc-core { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 18%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; font-family: var(--type-serif); font-style: italic; font-size: clamp(16px, 1.6vw, 22px); color: var(--c-noir); background: var(--accent-fill); box-shadow: 0 0 40px rgba(228, 198, 135, 0.35); }
.dc-tabs { display: grid; margin-top: var(--space-5); }
.dc-tabs button { position: relative; display: flex; align-items: baseline; gap: var(--space-4); padding: 14px 0 14px var(--space-5); border: 0; border-top: 1px solid var(--border-1); background: none; font-family: var(--type-serif); font-size: clamp(20px, 1.8vw, 24px); text-align: left; color: var(--text-3); cursor: pointer; transition: color var(--dur-2) ease; }
.dc-tabs button span { font-style: italic; font-size: 15px; color: var(--c-gold); min-width: 28px; }
.dc-tabs button::before { content: ""; position: absolute; left: 0; top: 50%; width: 2px; height: 0; background: var(--accent-fill); transform: translateY(-50%); transition: height var(--dur-3) var(--ease-out); }
.dc-tabs button:hover { color: var(--text-1); }
.dc-tabs button[aria-selected="true"] { color: var(--text-1); }
.dc-tabs button[aria-selected="true"]::before { height: 60%; }
.dc-panel { min-height: 190px; margin-top: var(--space-4); padding: var(--space-5); border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.025); box-shadow: inset 0 0 0 1px var(--border-1); }
.dc-panel > div { animation: dsRise var(--dur-3) var(--ease-out); }
.dc-panel p { margin: 0; font-family: var(--type-serif); font-size: var(--fs-md); line-height: 1.65; color: rgba(242, 236, 223, 0.86); }
.dc-panel b { font-weight: 400; color: var(--c-gold-bright); }
.dc-panel small { display: block; margin-top: var(--space-3); font-family: var(--type-serif); font-size: var(--fs-sm); color: var(--text-3); }
.dc-panel .dc-tier { margin-top: var(--space-4); }

/* ---------- private photos: a contact sheet ---------- */
.dc-photos { padding: var(--section-y) 0; scroll-margin-top: 70px; background: radial-gradient(ellipse 58% 44% at 50% 60%, var(--wash-wine), transparent 72%), linear-gradient(180deg, var(--noir) 0%, var(--tint-wine) 50%, var(--noir) 100%); }
.dc-sheet { position: relative; padding: 34px 26px 26px; border-radius: var(--radius-lg); background: #0c0a0b; box-shadow: var(--shadow-4), inset 0 0 0 1px var(--border-1); }
/* film sprockets along the top */
.dc-sheet::before { content: ""; position: absolute; left: 26px; right: 26px; top: 12px; height: 10px; background: repeating-linear-gradient(90deg, rgba(242, 236, 223, 0.14) 0 14px, transparent 14px 28px); border-radius: 2px; }
.dc-frames { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.dc-frames figure { position: relative; margin: 0; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 6px; background: #151114; box-shadow: inset 0 0 0 1px rgba(242, 236, 223, 0.08); }
.dc-frames img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(18px) saturate(0.5) brightness(0.55); transform: scale(1.18); transition: filter 1s var(--ease-out), transform 1s var(--ease-out); }
.dc-frames figcaption { position: absolute; left: 8px; bottom: 6px; z-index: 2; font-family: var(--type-serif); font-size: 11px; letter-spacing: 0.1em; color: rgba(242, 236, 223, 0.6); }
.dc-mark { position: absolute; inset: -40%; z-index: 1; display: flex; flex-direction: column; justify-content: center; gap: 18px; transform: rotate(-24deg); opacity: 0; transition: opacity 0.8s ease; pointer-events: none; }
.dc-mark span { white-space: nowrap; font-family: var(--type-serif); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 255, 255, 0.24); }
.dc-mark span:nth-child(even) { margin-left: -60px; }
.dc-sheet[data-state="approved"] .dc-frames img { filter: grayscale(0.15) brightness(0.9); transform: scale(1.02); }
.dc-sheet[data-state="approved"] .dc-mark { opacity: 1; }
.dc-sheet[data-state="approved"] figure:nth-child(2) img, .dc-sheet[data-state="approved"] figure:nth-child(2) .dc-mark { transition-delay: 0.12s; }
.dc-sheet[data-state="approved"] figure:nth-child(3) img, .dc-sheet[data-state="approved"] figure:nth-child(3) .dc-mark { transition-delay: 0.24s; }
.dc-sheet[data-state="approved"] figure:nth-child(4) img, .dc-sheet[data-state="approved"] figure:nth-child(4) .dc-mark { transition-delay: 0.36s; }
.dc-request { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--border-1); }
.dc-req-av { display: grid; place-items: center; flex: 0 0 44px; height: 44px; border-radius: 50%; font-family: var(--type-serif); font-style: italic; font-size: 20px; color: var(--text-1); background: linear-gradient(140deg, var(--c-wine-bright), var(--c-wine)); }
.dc-req-text { flex: 1; min-width: 200px; margin: 0; font-family: var(--type-serif); font-size: var(--fs-lg); color: var(--text-2); }
.dc-req-text b { font-weight: 400; color: var(--text-1); }
.dc-req-actions { display: flex; gap: var(--space-2); }

/* ---------- hidden zones: the map ---------- */
.dc-zones { padding: var(--section-y) 0; scroll-margin-top: 70px; background: radial-gradient(ellipse 58% 44% at 70% 50%, var(--wash-forest), transparent 72%), radial-gradient(ellipse 40% 28% at 10% 20%, var(--wash-forest-soft), transparent 70%), linear-gradient(180deg, var(--noir) 0%, var(--tint-forest) 50%, var(--noir) 100%); }
.dc-zones-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(48px, 7vw, 110px); align-items: center; }
.dc-zones-grid--flip > :first-child { order: 2; }
.dc-map { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-xl); background: radial-gradient(ellipse 80% 70% at 50% 50%, #12201a, #0a0e0c); box-shadow: var(--shadow-3), inset 0 0 0 1px rgba(78, 156, 121, 0.25); }
.dc-streets { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: rgba(242, 236, 223, 0.1); stroke-width: 1.4; }
.dc-streets .river { stroke: rgba(78, 156, 121, 0.35); stroke-width: 7; stroke-linecap: round; }
.dc-member { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--text-2); box-shadow: 0 0 0 3px rgba(242, 236, 223, 0.1); transition: opacity var(--dur-4) ease, transform var(--dur-4) var(--ease-out); }
.dc-member.gone { opacity: 0.12; transform: scale(0.5); }
.dc-zone { position: absolute; left: var(--px, 50%); top: var(--py, 50%); width: var(--d, 120px); height: var(--d, 120px); transform: translate(-50%, -50%); border-radius: 50%; border: 1.5px solid var(--c-gold-bright); background: radial-gradient(circle, rgba(199, 166, 92, 0.16), rgba(199, 166, 92, 0.05) 70%); box-shadow: 0 0 40px rgba(199, 166, 92, 0.18); transition: width 0.45s var(--ease-out), height 0.45s var(--ease-out), left 0.7s var(--ease-out), top 0.7s var(--ease-out); }
.dc-pin { position: absolute; left: var(--px, 50%); top: var(--py, 50%); z-index: 2; transform: translate(-50%, -50%); transition: left 0.7s var(--ease-out), top 0.7s var(--ease-out); }
.dc-pin i { display: block; width: 16px; height: 16px; border-radius: 50%; background: var(--accent-fill); box-shadow: 0 0 0 5px rgba(228, 198, 135, 0.2); animation: dcPulse 2.4s ease-in-out infinite; }
.dc-pin b { position: absolute; left: 50%; top: 24px; transform: translateX(-50%); padding: 4px 10px; border-radius: var(--radius-pill); white-space: nowrap; font-family: var(--type-serif); font-weight: 400; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-noir); background: var(--accent-fill); }
@keyframes dcPulse { 50% { box-shadow: 0 0 0 11px rgba(228, 198, 135, 0.08); } }
.dc-map-controls { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; margin-top: var(--space-5); }
.dc-place { display: inline-flex; padding: 4px; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px var(--border-2); }
.dc-place button { padding: 8px 18px; border: 0; border-radius: var(--radius-pill); background: none; font-family: var(--type-serif); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); cursor: pointer; transition: background var(--dur-3) ease, color var(--dur-2) ease; }
.dc-place button[aria-pressed="true"] { color: var(--c-noir); background: var(--accent-fill); }
.dc-radius { display: grid; gap: 8px; flex: 1; min-width: 220px; font-family: var(--type-serif); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); }
.dc-radius output { margin-left: 8px; letter-spacing: 0.04em; text-transform: none; font-size: 16px; color: var(--text-1); }
.dc-radius input { width: 100%; accent-color: var(--c-gold); }

/* ---------- block and report ---------- */
.dc-report { padding: var(--section-y) 0; scroll-margin-top: 70px; background: radial-gradient(ellipse 50% 44% at 30% 50%, rgba(74, 44, 82, 0.35), transparent 72%), linear-gradient(180deg, var(--noir) 0%, #0e0c10 50%, var(--noir) 100%); }
.dc-phone-card { width: min(420px, 100%); justify-self: center; }
.dc-prof { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--surface-1); box-shadow: var(--shadow-3), inset 0 0 0 1px var(--border-1); }
.dc-prof-av { display: grid; place-items: center; flex: 0 0 52px; height: 52px; border-radius: 50%; font-family: var(--type-serif); font-style: italic; font-size: 22px; color: var(--text-1); background: linear-gradient(140deg, #4a2c52, #2a1830); }
.dc-prof-name { display: grid; flex: 1; font-family: var(--type-serif); }
.dc-prof-name b { font-weight: 400; font-size: 20px; color: var(--text-1); }
.dc-prof-name small { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); }
.dc-more { width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(242, 236, 223, 0.06); font-size: 20px; line-height: 1; letter-spacing: 1px; color: var(--text-1); cursor: pointer; box-shadow: inset 0 0 0 1px var(--border-2); transition: background var(--dur-2) ease, box-shadow var(--dur-2) ease; }
.dc-more:hover, .dc-more[aria-expanded="true"] { background: rgba(199, 166, 92, 0.12); box-shadow: inset 0 0 0 1px var(--c-gold-bright); }
.dc-sheet-menu { margin-top: var(--space-3); padding: var(--space-2); border-radius: var(--radius-lg); background: var(--surface-glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--shadow-3), inset 0 0 0 1px var(--border-2); animation: dsRise var(--dur-3) var(--ease-out); }
.dc-step > button { display: grid; width: 100%; gap: 2px; padding: 14px 16px; border: 0; border-radius: var(--radius-md); background: none; font-family: var(--type-serif); font-size: 18px; text-align: left; color: var(--text-1); cursor: pointer; transition: background var(--dur-2) ease; }
.dc-step > button small { font-size: 12.5px; color: var(--text-3); }
.dc-step > button:hover { background: rgba(242, 236, 223, 0.05); }
.dc-step > button:first-child { color: var(--danger); }
.dc-step-title { display: block; padding: 10px 14px 6px; font-family: var(--type-serif); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); }
.dc-reasons { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 12px 12px; }
.dc-reasons button { padding: 8px 13px; border: 0; border-radius: var(--radius-pill); background: rgba(242, 236, 223, 0.06); font-family: var(--type-serif); font-size: 14px; color: var(--text-1); cursor: pointer; box-shadow: inset 0 0 0 1px rgba(242, 236, 223, 0.15); transition: background var(--dur-2) ease, box-shadow var(--dur-2) ease; }
.dc-reasons button:hover { background: rgba(199, 166, 92, 0.12); box-shadow: inset 0 0 0 1px var(--c-gold-bright); }
.dc-done { display: grid; gap: 4px; padding: 16px; font-family: var(--type-serif); }
.dc-done b { font-weight: 400; font-size: 22px; color: var(--success); }
.dc-done small { font-size: 14.5px; line-height: 1.5; color: var(--text-2); }
.dc-undo { justify-self: start; margin-top: 8px; padding: 0; border: 0; background: none; font-family: var(--type-serif); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-gold-bright); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ---------- every protection: three folders ---------- */
.dc-all { padding: var(--section-y) 0; scroll-margin-top: 70px; }
.dc-folders { display: grid; grid-template-columns: 1.25fr 0.8fr 1.1fr; gap: var(--space-5); align-items: start; }
.dc-folder { position: relative; margin-top: 34px; padding: var(--space-6) var(--space-5) var(--space-5); border-radius: 0 var(--radius-lg) var(--radius-lg) var(--radius-lg); background: linear-gradient(165deg, #142019, #0d100e); box-shadow: var(--shadow-3), inset 0 0 0 1px rgba(78, 156, 121, 0.22); transition: transform var(--dur-4) var(--ease-out); }
.dc-folder:hover { transform: translateY(-4px); }
.dc-folder-tab { position: absolute; left: 0; top: -34px; height: 36px; padding: 10px 20px 0; border-radius: 14px 14px 0 0; font-family: var(--type-serif); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: #cfe9dc; background: #142019; box-shadow: inset 0 1px 0 rgba(78, 156, 121, 0.35); }
.dc-folder--gold { background: linear-gradient(165deg, #231d12, #100e0b); box-shadow: var(--shadow-3), inset 0 0 0 1px rgba(199, 166, 92, 0.3); }
.dc-folder--gold .dc-folder-tab { color: var(--c-gold-bright); background: #231d12; box-shadow: inset 0 1px 0 rgba(199, 166, 92, 0.35); }
.dc-folder--black { background: linear-gradient(165deg, #261019, #0f0b0d); box-shadow: var(--shadow-3), inset 0 0 0 1px rgba(176, 68, 95, 0.32); }
.dc-folder--black .dc-folder-tab { color: var(--tier-black); background: #261019; box-shadow: inset 0 1px 0 rgba(176, 68, 95, 0.4); }
.dc-folder ul { margin: 0; padding: 0; list-style: none; }
.dc-folder li { display: grid; gap: 3px; padding: 13px 0; border-top: 1px dashed rgba(242, 236, 223, 0.1); font-family: var(--type-serif); }
.dc-folder li:first-child { border-top: 0; padding-top: 0; }
.dc-folder b { font-weight: 400; font-size: 19px; color: var(--text-1); }
.dc-folder span { font-size: 14.5px; line-height: 1.5; color: var(--text-2); }

/* ---------- your data: three promises, set large ---------- */
.dc-data { padding: var(--space-8) 0 var(--section-y); scroll-margin-top: 70px; }
.dc-vows { margin: var(--space-5) 0 var(--space-7); padding: 0; list-style: none; counter-reset: vow; }
.dc-vows li { display: grid; grid-template-columns: 60px minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--space-5); align-items: end; padding: var(--space-6) 0; border-top: 1px solid var(--border-2); counter-increment: vow; }
.dc-vows li:last-child { border-bottom: 1px solid var(--border-2); }
.dc-vows li::before { content: counter(vow, lower-roman) "."; font-family: var(--type-serif); font-style: italic; font-size: 18px; color: var(--c-gold); align-self: start; padding-top: 14px; }
.dc-vows b { font-family: var(--type-serif); font-weight: 400; font-size: clamp(40px, 5.4vw, 84px); line-height: 1; letter-spacing: -0.03em; color: var(--text-1); }
.dc-vows span { max-width: 40ch; padding-bottom: 8px; font-family: var(--type-serif); font-size: var(--fs-md); line-height: 1.6; color: var(--text-2); }

/* ---------- the invitation, under the unicorn ---------- */
.dc-close { position: relative; isolation: isolate; overflow: hidden; padding: var(--section-y) 0; text-align: center; background: radial-gradient(ellipse 58% 44% at 50% 50%, var(--wash-wine), transparent 72%), linear-gradient(180deg, var(--noir) 0%, var(--tint-wine) 50%, var(--noir) 100%); }
.dc-close::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: min(620px, 90vw); aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; background: url("/LandingPage/videos/fantasi-emblem.webp?v=2") center / contain no-repeat; filter: grayscale(0.3) brightness(0.9) blur(1.5px); opacity: 0.075; }
.dc-close p { max-width: 44ch; margin: 0 auto; font-family: var(--type-serif); font-size: var(--fs-lg); line-height: var(--lh-body); color: rgba(242, 236, 223, 0.85); }

/* ---------- smaller screens ---------- */
@media (max-width: 1000px) {
  .dc-hero-grid, .dc-layers-grid, .dc-zones-grid { grid-template-columns: 1fr; }
  .dc-zones-grid--flip > :first-child { order: 0; }
  .dc-file { justify-self: center; margin-top: 60px; }
  .dc-folders { grid-template-columns: 1fr; }
  .dc-vows li { grid-template-columns: 40px minmax(0, 1fr); }
  .dc-vows span { grid-column: 2; }
}
@media (max-width: 700px) {
  .dc-hero { padding-top: 110px; }
  .dc-actions .btn { flex: 1 1 100%; justify-content: center; }
  .dc-frames { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dc-req-actions { width: 100%; }
  .dc-req-actions .btn { flex: 1; justify-content: center; }
  .dc-file-body { padding: var(--space-5) var(--space-5) var(--space-6); }
}
@media (prefers-reduced-motion: reduce) {
  .dc-ring.on::after, .dc-pin i { animation: none; }
}
/* The private atelier: a photographic opening and a quietly ordered dossier. */
main.dc { --dc-paper:#efe7d9; --dc-muted:#c5b9ae; --dc-line:rgba(205,180,142,.26); --dc-bronze:#c5a67b; background:#0e0c0e; }
.dc :is(.dc-title, .dc-h, .dc-vows b) { font-family: var(--type-serif); font-weight: 400; }
.dc :is(.dc-title em,.dc-h em,.dc-vows em) { background:none; color:var(--dc-bronze); }
.dc :is(.dc-kicker,.dc-tier,.dc-folder-tab,.dc-index a,.dc-atelier figcaption) { font-family:garamond-premier-pro-display,Garamond,serif; }
.dc :is(p,.dc-points,.dc-panel small,.dc-folder li,.dc-vows span,.dc-note,.dc-req-text) { font-family:'Times New Roman',serif; }
.dc-hero { padding:155px 0 85px; background:radial-gradient(ellipse at 76% 32%,#2c202b 0,transparent 56%),#0e0c0e; }
.dc-hero-grid { grid-template-columns:1fr 1fr; gap:8%; align-items:center; }
.dc-title { font-size:clamp(58px,7.5vw,112px); letter-spacing:-.045em; line-height:1.02; }
.dc-hero .dc-kicker { margin-top:44px; }
.dc-lede { font-size:22px; max-width:33ch; line-height:1.6; margin-top:32px; }
.dc-hero-qualification { max-width:37ch; color:var(--dc-muted); font-size:15px; line-height:1.6; margin:20px 0 0; }
.dc-atelier { position:relative; margin:0 0 48px; min-width:0; aspect-ratio:4/5; isolation:isolate; }
.dc-atelier-photo { width:100%; height:100%; object-fit:cover; filter:sepia(.35) brightness(.62); }
.dc-veil { position:absolute; inset:0 0 0 45%; backdrop-filter:blur(13px); background:linear-gradient(90deg,rgba(33,22,31,.1),rgba(33,22,31,.4)); border-left:1px solid rgba(239,231,217,.25); }
.dc-atelier::before { content:''; position:absolute; inset:18px; z-index:1; border:1px solid rgba(239,231,217,.22); pointer-events:none; }
.dc-atelier-card { position:absolute; z-index:2; bottom:38px; left:-30px; width:82%; padding:30px; background:rgba(35,26,32,.86); backdrop-filter:blur(18px); border:1px solid var(--dc-line); }
.dc-atelier-card .dc-kicker { margin:0; font-size:11px; }
.dc-atelier-card p { font-family:var(--type-serif); font-size:clamp(28px,3vw,44px); line-height:1.15; margin:22px 0; }
.dc-atelier-card em { color:#d8c4a2; }
.dc-atelier-card small { color:var(--dc-muted); font:14px 'Times New Roman',serif; }
.dc-atelier-rule { display:block; width:45px; height:1px; background:var(--dc-bronze); margin:0 0 20px; }
.dc-atelier figcaption { position:absolute; bottom:-32px; right:0; text-transform:uppercase; letter-spacing:.14em; color:var(--dc-muted); font-size:11px; }
.dc-index { display:flex; gap:25px; flex-wrap:wrap; align-items:center; padding-top:24px; padding-bottom:24px; border-top:1px solid var(--dc-line); border-bottom:1px solid var(--dc-line); }
.dc-index .dc-kicker { margin-right:auto; font-size:11px; }
.dc-index a { color:var(--dc-paper); font-size:15px; padding:8px 0; text-decoration:none; }
.dc-index a:hover { color:var(--dc-bronze); }
.dc :is(.dc-layers,.dc-photos,.dc-zones,.dc-report,.dc-all,.dc-data) { padding:110px 0; background:none; }
.dc-layers-grid { grid-template-columns:.85fr 1.15fr; gap:10%; }
.dc-rings { max-width:390px; }
.dc-core { background:#c8ae87; box-shadow:none; }
.dc-ring.on { border-color:var(--dc-bronze); box-shadow:none; background:rgba(197,166,123,.035); }
.dc-ring.on::after { animation:none; }
.dc-h { font-size:clamp(38px,4.5vw,66px); max-width:14ch; line-height:1.1; }
.dc-panel { padding:25px 0 0; border-radius:0; box-shadow:none; border-top:1px solid var(--dc-line); background:none; min-height:220px; }
.dc-tabs button { font-family:var(--type-serif); font-style:normal; font-size:24px; padding-left:0; }
.dc-tabs button::before { display:none; }
.dc-head { align-items:end; margin-bottom:45px; }
.dc-head>div { flex:1; }
.dc-head>p { flex:0 1 37ch; }
.dc-sheet { padding:26px; border-radius:0; background:#191419; box-shadow:none; border:1px solid var(--dc-line); }
.dc-sheet::before { display:none; }
.dc-frames { gap:14px; }
.dc-frames figure { border-radius:0; }
.dc-frames figure:nth-child(even) { margin-top:35px; }
.dc-note { font-size:15px; line-height:1.6; color:var(--dc-muted); max-width:76ch; margin:20px auto 0; }
.dc-map { border-radius:0; background:radial-gradient(ellipse at 55% 40%,#392d32,#1c171b); box-shadow:none; border:1px solid var(--dc-line); }
.dc-streets .river { stroke:rgba(197,166,123,.25); }
.dc-place,.dc-place button { border-radius:0; }
.dc-pin i { animation:none; }
.dc-phone-card { width:min(440px,100%); padding:35px 28px; border:1px solid var(--dc-line); background:linear-gradient(145deg,#2b202b,#171317); }
.dc-prof,.dc-sheet-menu { border-radius:0; box-shadow:none; background:transparent; }
.dc-prof { padding:0 0 24px; border-bottom:1px solid var(--dc-line); }
.dc-folders { grid-template-columns:1fr; gap:0; border-top:1px solid var(--dc-line); }
.dc-folder,.dc-folder--gold,.dc-folder--black { display:grid; grid-template-columns:190px 1fr; gap:40px; margin:0; padding:32px 0; border-radius:0; border-bottom:1px solid var(--dc-line); background:none; box-shadow:none; }
.dc-folder:hover { transform:none; }
.dc-folder .dc-folder-tab { position:static; background:none; box-shadow:none; padding:0; height:auto; color:var(--dc-bronze); font-size:15px; border-radius:0; }
.dc-folder ul { display:grid; grid-template-columns:1fr 1fr; gap:20px 35px; }
.dc-folder li,.dc-folder li:first-child { padding:0; border:0; }
.dc-folder b { font-family:the-seasons,Georgia,serif; font-size:24px; }
.dc-folder span { color:var(--dc-muted); font-size:16px; }
.dc-tier { border-radius:0; color:var(--dc-paper); }
.dc-tier--black { color:#d5bacd; }
.dc-vows li { grid-template-columns:40px 1fr 1fr; gap:32px; padding:40px 0; }
.dc-vows b { font-size:clamp(35px,4.5vw,65px); }
.dc-close { text-align:left; padding:100px 0; background:linear-gradient(115deg,#2a1d29,#191314); border-top:1px solid var(--dc-line); }
.dc-close .container { position:relative; }
.dc-close .dc-h { max-width:18ch; }
.dc-close p { margin:0; max-width:44ch; }
.dc-close .dc-actions { justify-content:flex-start; }
.dc-close::before { left:80%; width:390px; opacity:.05; }
.dc :is(a,button,input):focus-visible { outline:2px solid #e6c99d; outline-offset:5px; }
.dc [hidden] { display:none!important; }
@media(max-width:1000px) { .dc-hero-grid { gap:5%; }.dc-title { font-size:clamp(56px,8vw,85px); }.dc-atelier-card { left:-15px; padding:23px; }.dc-index { gap:18px; }.dc-layers-grid { gap:5%; }.dc-folder { grid-template-columns:150px 1fr; gap:25px; } }
@media(max-width:700px) { .dc-hero { padding-top:110px; padding-bottom:50px; }.dc-hero-grid,.dc-layers-grid,.dc-zones-grid { grid-template-columns:1fr; gap:50px; }.dc-title { font-size:66px; }.dc-lede { font-size:20px; }.dc-hero .dc-kicker { margin-top:28px; }.dc-atelier { margin:0 0 30px 14px; max-width:450px; }.dc-atelier-card { left:-14px; width:90%; }.dc-atelier-card p { font-size:37px; }.dc-index { gap:10px 24px; }.dc-index .dc-kicker { width:100%; }.dc-index a { font-size:14px; }.dc :is(.dc-layers,.dc-photos,.dc-zones,.dc-report,.dc-all,.dc-data) { padding:65px 0; }.dc-rings { max-width:270px; }.dc-h { font-size:43px; }.dc-head { display:block; }.dc-head>p { font-size:20px; }.dc-sheet { padding:14px; }.dc-frames { gap:10px; }.dc-frames figure:nth-child(even) { margin-top:20px; }.dc-request { gap:12px; }.dc-req-text { min-width:150px; font-size:19px; }.dc-folder { grid-template-columns:1fr; gap:22px; }.dc-folder ul { grid-template-columns:1fr; gap:24px; }.dc-vows li { grid-template-columns:25px 1fr; gap:16px; }.dc-vows span { grid-column:2; }.dc-close { padding:65px 0; }.dc-phone-card { padding:24px 18px; }.dc-hero .dc-actions .btn { flex:1 1 auto; } }
@media(prefers-reduced-motion:reduce) { .dc *, .dc *::before, .dc *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }

/* ==========================================================================
   The modern finish. The layout above stays as it is; this gives it depth:
   colour washes behind each chapter, rounded glass panels, pill controls,
   soft glows and real hover and pressed states (the Community language).
   ========================================================================== */
main.dc { --dc-glass: linear-gradient(180deg, rgba(28, 23, 28, 0.78), rgba(14, 12, 15, 0.82)); --dc-edge: inset 0 0 0 1px rgba(228, 198, 135, 0.2); --dc-soft: rgba(242, 236, 223, 0.045); }
main.dc :is(.dc-title em, .dc-h em, .dc-vows em, .dc-atelier-card em) { font-family: var(--type-display); font-style: italic; font-weight: 300; background: var(--accent-text); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: 0.06em; }

/* each chapter sits in its own wash, fading to black at the edges */
main.dc .dc-hero { position: relative; isolation: isolate; background: radial-gradient(ellipse 55% 60% at 78% 40%, rgba(74, 44, 82, 0.5), transparent 70%), radial-gradient(ellipse 50% 50% at 10% 85%, var(--wash-wine), transparent 70%), linear-gradient(180deg, #120d12 0%, #0e0c0e 100%); }
main.dc .dc-layers { background: radial-gradient(ellipse 50% 55% at 25% 50%, var(--wash-gold), transparent 72%), linear-gradient(180deg, var(--noir) 0%, var(--tint-gold) 50%, var(--noir) 100%); }
main.dc .dc-photos { background: radial-gradient(ellipse 60% 50% at 50% 62%, var(--wash-wine), transparent 72%), linear-gradient(180deg, var(--noir) 0%, var(--tint-wine) 50%, var(--noir) 100%); }
main.dc .dc-zones { background: radial-gradient(ellipse 55% 50% at 72% 50%, var(--wash-forest), transparent 72%), linear-gradient(180deg, var(--noir) 0%, var(--tint-forest) 50%, var(--noir) 100%); }
main.dc .dc-report { background: radial-gradient(ellipse 50% 55% at 25% 50%, rgba(74, 44, 82, 0.45), transparent 72%), linear-gradient(180deg, var(--noir) 0%, #120e14 50%, var(--noir) 100%); }
main.dc .dc-all { background: radial-gradient(ellipse 55% 45% at 50% 55%, var(--wash-gold-soft), transparent 72%), linear-gradient(180deg, var(--noir) 0%, var(--tint-gold) 50%, var(--noir) 100%); }

/* ---------- hero: the photograph framed, the card in glass ---------- */
main.dc .dc-atelier { border-radius: 34px; box-shadow: var(--shadow-4); }
main.dc .dc-atelier-photo { border-radius: 34px; filter: sepia(0.25) brightness(0.7) contrast(1.05); }
main.dc .dc-veil { border-radius: 0 34px 34px 0; border-left: 0; box-shadow: inset 1px 0 0 rgba(239, 231, 217, 0.22); }
main.dc .dc-atelier::before { inset: 14px; border: 0; border-radius: 24px; box-shadow: inset 0 0 0 1px rgba(239, 231, 217, 0.2); }
main.dc .dc-atelier-card { border: 0; border-radius: 24px; background: rgba(30, 22, 28, 0.66); -webkit-backdrop-filter: blur(22px) saturate(1.2); backdrop-filter: blur(22px) saturate(1.2); box-shadow: var(--shadow-4), inset 0 1px 0 rgba(255, 255, 255, 0.08), var(--dc-edge); transition: transform var(--dur-4) var(--ease-out); }
main.dc .dc-atelier:hover .dc-atelier-card { transform: translateY(-6px); }
main.dc .dc-atelier-rule { width: 54px; height: 2px; border-radius: 2px; background: var(--accent-fill); }
main.dc .dc-atelier figcaption { bottom: -36px; }

/* the chapter index: a glass bar of pills */
main.dc .dc-index { gap: 8px; margin-top: 10px; padding: 10px 10px 10px 24px; border: 0; border-radius: var(--radius-pill); background: var(--dc-glass); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: var(--shadow-2), var(--dc-edge); }
main.dc .dc-index a { padding: 9px 16px; border-radius: var(--radius-pill); font-size: 14px; color: var(--text-2); background: var(--dc-soft); transition: background var(--dur-3) ease, color var(--dur-2) ease, transform var(--dur-2) var(--ease-out); }
main.dc .dc-index a:hover { color: var(--c-noir); background: var(--accent-fill); transform: translateY(-1px); }

/* tier tags and the small kickers */
main.dc .dc-tier { border-radius: var(--radius-pill); padding: 6px 13px; background: var(--dc-soft); box-shadow: inset 0 0 0 1px rgba(242, 236, 223, 0.18); }
main.dc .dc-tier--black { color: var(--tier-black); background: rgba(176, 68, 95, 0.12); box-shadow: inset 0 0 0 1px rgba(176, 68, 95, 0.45); }
main.dc .dc-points li { position: relative; padding: 12px 0 12px 24px; border-top: 1px solid rgba(242, 236, 223, 0.07); }
main.dc .dc-points li::before { content: ""; position: absolute; left: 2px; top: 20px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-fill); box-shadow: 0 0 10px rgba(228, 198, 135, 0.5); }

/* ---------- 01 the rings ---------- */
main.dc .dc-ring { border-color: rgba(228, 198, 135, 0.16); transition: border-color var(--dur-4) ease, box-shadow var(--dur-4) ease, background var(--dur-4) ease; }
main.dc .dc-ring.on { border-color: var(--c-gold-bright); background: radial-gradient(circle, transparent 55%, rgba(199, 166, 92, 0.12)); box-shadow: 0 0 40px rgba(199, 166, 92, 0.2), inset 0 0 30px rgba(199, 166, 92, 0.08); }
main.dc .dc-ring.on::after { animation: dcOrbit 9s linear infinite; }
main.dc .dc-core { background: var(--accent-fill); box-shadow: 0 0 0 8px rgba(199, 166, 92, 0.08), 0 0 50px rgba(228, 198, 135, 0.4); }
main.dc .dc-tabs { gap: 6px; margin-top: var(--space-5); }
main.dc .dc-tabs button { padding: 13px 18px; border: 0; border-radius: 18px; background: transparent; font-size: 22px; transition: background var(--dur-3) ease, color var(--dur-2) ease, box-shadow var(--dur-3) ease; }
main.dc .dc-tabs button:hover { background: var(--dc-soft); }
main.dc .dc-tabs button[aria-selected="true"] { color: var(--text-1); background: var(--dc-glass); box-shadow: var(--shadow-2), var(--dc-edge); }
main.dc .dc-tabs button span { display: inline-grid; place-items: center; min-width: 30px; height: 30px; border-radius: 50%; font-size: 13px; box-shadow: inset 0 0 0 1px rgba(228, 198, 135, 0.35); }
main.dc .dc-tabs button[aria-selected="true"] span { color: var(--c-noir); background: var(--accent-fill); box-shadow: none; }
main.dc .dc-panel { margin-top: 14px; padding: 22px 24px; border: 0; border-radius: 22px; background: var(--dc-glass); box-shadow: var(--shadow-3), var(--dc-edge); min-height: 200px; }

/* ---------- 02 the contact sheet ---------- */
main.dc .dc-sheet { padding: 22px; border: 0; border-radius: 32px; background: var(--dc-glass); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: var(--shadow-4), var(--dc-edge); }
main.dc .dc-frames figure { border-radius: 20px; box-shadow: var(--shadow-2), inset 0 0 0 1px rgba(242, 236, 223, 0.08); transition: transform var(--dur-4) var(--ease-out); }
main.dc .dc-frames figure:hover { transform: translateY(-4px); }
main.dc .dc-frames figcaption { left: 10px; bottom: 10px; padding: 3px 9px; border-radius: var(--radius-pill); color: var(--text-1); background: rgba(11, 10, 12, 0.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
main.dc .dc-request { margin-top: 20px; padding: 12px 12px 12px 14px; border: 0; border-radius: var(--radius-pill); background: var(--dc-soft); box-shadow: inset 0 0 0 1px rgba(242, 236, 223, 0.08); }
main.dc .dc-req-av { box-shadow: 0 0 0 2px #1a1519, 0 0 0 3.5px var(--c-wine-bright); }
main.dc .dc-note { color: var(--text-3); }

/* ---------- 03 the map ---------- */
main.dc .dc-map { border: 0; border-radius: 32px; background: radial-gradient(ellipse 70% 70% at 50% 45%, #1d2b24, #0d1210 75%); box-shadow: var(--shadow-4), inset 0 0 0 1px rgba(78, 156, 121, 0.28), inset 0 0 80px rgba(0, 0, 0, 0.5); }
main.dc .dc-streets path { stroke: rgba(242, 236, 223, 0.09); }
main.dc .dc-streets .river { stroke: rgba(78, 156, 121, 0.4); }
main.dc .dc-pin i { animation: dcPulse 2.4s ease-in-out infinite; }
main.dc .dc-map-controls { margin-top: 14px; padding: 10px 18px 10px 10px; border-radius: var(--radius-pill); background: var(--dc-glass); box-shadow: var(--shadow-2), var(--dc-edge); }
main.dc .dc-place { padding: 4px; border-radius: var(--radius-pill); background: var(--dc-soft); box-shadow: none; }
main.dc .dc-place button { border-radius: var(--radius-pill); padding: 8px 18px; }
main.dc .dc-place button[aria-pressed="true"] { box-shadow: 0 4px 14px rgba(199, 166, 92, 0.3); }
main.dc .dc-radius { grid-template-columns: auto 1fr; align-items: center; gap: 14px; }
main.dc .dc-radius input { -webkit-appearance: none; appearance: none; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--c-gold) var(--fill, 5%), rgba(242, 236, 223, 0.12) var(--fill, 5%)); cursor: pointer; }
main.dc .dc-radius input::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--c-cream); box-shadow: 0 0 0 4px rgba(199, 166, 92, 0.35), 0 4px 10px rgba(0, 0, 0, 0.5); transition: transform var(--dur-2) var(--ease-spring); }
main.dc .dc-radius input::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 50%; background: var(--c-cream); box-shadow: 0 0 0 4px rgba(199, 166, 92, 0.35), 0 4px 10px rgba(0, 0, 0, 0.5); }
main.dc .dc-radius input:active::-webkit-slider-thumb { transform: scale(1.15); }

/* ---------- report and block ---------- */
main.dc .dc-phone-card { padding: 18px; border: 0; border-radius: 32px; background: var(--dc-glass); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: var(--shadow-4), var(--dc-edge); }
main.dc .dc-prof { padding: 12px; border: 0; border-radius: 22px; background: var(--dc-soft); box-shadow: inset 0 0 0 1px rgba(242, 236, 223, 0.08); }
main.dc .dc-prof-av { box-shadow: 0 0 0 2px #1a1519, 0 0 0 3.5px rgba(150, 110, 170, 0.8); }
main.dc .dc-sheet-menu { margin-top: 10px; padding: 6px; border-radius: 22px; background: rgba(11, 10, 12, 0.5); box-shadow: inset 0 0 0 1px rgba(242, 236, 223, 0.08); }
main.dc .dc-step > button { border-radius: 16px; }
main.dc .dc-reasons button { border-radius: var(--radius-pill); }
main.dc .dc-phone-card .dc-note { margin-top: 14px; }

/* ---------- 04 the details: each level in its own glass panel ---------- */
main.dc .dc-folders { gap: 14px; border: 0; }
main.dc :is(.dc-folder, .dc-folder--gold, .dc-folder--black) { padding: 26px 28px; border: 0; border-radius: 28px; background: var(--dc-glass); box-shadow: var(--shadow-3), inset 0 0 0 1px rgba(78, 156, 121, 0.22); transition: transform var(--dur-4) var(--ease-out), box-shadow var(--dur-3) ease; }
main.dc .dc-folder--gold { box-shadow: var(--shadow-3), inset 0 0 0 1px rgba(199, 166, 92, 0.3); background: radial-gradient(ellipse 60% 100% at 0% 0%, rgba(199, 166, 92, 0.1), transparent 70%), var(--dc-glass); }
main.dc .dc-folder--black { box-shadow: var(--shadow-3), inset 0 0 0 1px rgba(176, 68, 95, 0.32); background: radial-gradient(ellipse 60% 100% at 0% 0%, rgba(107, 26, 48, 0.25), transparent 70%), var(--dc-glass); }
main.dc .dc-folder:not(.dc-folder--gold):not(.dc-folder--black) { background: radial-gradient(ellipse 60% 100% at 0% 0%, rgba(30, 74, 56, 0.28), transparent 70%), var(--dc-glass); }
main.dc :is(.dc-folder, .dc-folder--gold, .dc-folder--black):hover { transform: translateY(-3px); }
main.dc .dc-folder .dc-folder-tab { align-self: start; justify-self: start; padding: 7px 14px; border-radius: var(--radius-pill); font-size: 11px; letter-spacing: 0.16em; color: #cfe9dc; background: rgba(30, 74, 56, 0.55); }
main.dc .dc-folder--gold .dc-folder-tab { color: var(--c-noir); background: var(--accent-fill); }
main.dc .dc-folder--black .dc-folder-tab { color: var(--text-1); background: linear-gradient(140deg, var(--c-wine-bright), var(--c-wine)); }
main.dc .dc-folder ul { gap: 10px; }
main.dc .dc-folder li { padding: 14px 16px; border-radius: 16px; background: var(--dc-soft); transition: background var(--dur-3) ease, box-shadow var(--dur-3) ease; }
main.dc .dc-folder li:first-child { padding: 14px 16px; }
main.dc .dc-folder li:hover { background: rgba(242, 236, 223, 0.07); box-shadow: inset 0 0 0 1px rgba(228, 198, 135, 0.28); }
main.dc .dc-folder b { font-size: 21px; }
main.dc .dc-folder span { font-size: 14.5px; }

/* ---------- 05 your information: three cards ---------- */
main.dc .dc-vows { display: grid; gap: 12px; }
main.dc .dc-vows li, main.dc .dc-vows li:last-child { padding: 30px 32px; border: 0; border-radius: 28px; background: var(--dc-glass); box-shadow: var(--shadow-3), var(--dc-edge); transition: transform var(--dur-4) var(--ease-out), box-shadow var(--dur-3) ease; }
main.dc .dc-vows li:hover { transform: translateY(-3px); box-shadow: var(--shadow-4), inset 0 0 0 1px rgba(228, 198, 135, 0.4); }
main.dc .dc-vows li::before { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border-radius: 50%; font-size: 14px; color: var(--c-gold-bright); box-shadow: inset 0 0 0 1px rgba(228, 198, 135, 0.4); align-self: center; }

/* ---------- the invitation: a glass panel over the wash ---------- */
main.dc .dc-close { padding: var(--section-y) 0; border: 0; background: radial-gradient(ellipse 55% 60% at 30% 50%, var(--wash-wine), transparent 72%), linear-gradient(180deg, var(--noir) 0%, var(--tint-wine) 50%, var(--noir) 100%); }
main.dc .dc-close .container { padding: clamp(36px, 5vw, 64px); border-radius: 36px; overflow: hidden; background: radial-gradient(ellipse 70% 90% at 0% 0%, rgba(107, 26, 48, 0.45), transparent 70%), var(--dc-glass); box-shadow: var(--shadow-4), var(--dc-edge); }
main.dc .dc-close::before { left: 78%; z-index: 0; }

@media (max-width: 700px) {
  main.dc .dc-index { border-radius: 26px; padding: 14px; }
  main.dc .dc-map-controls { border-radius: 26px; padding: 12px; }
  main.dc .dc-request { border-radius: 24px; }
  main.dc .dc-vows li, main.dc .dc-vows li:last-child { padding: 24px 20px; }
  main.dc .dc-atelier, main.dc .dc-atelier-photo { border-radius: 26px; }
}
main.dc .dc-close::before { display: none; }
main.dc .dc-close .container { position: relative; isolation: isolate; }
main.dc .dc-close .container::after { content: ""; position: absolute; z-index: -1; right: -30px; top: 50%; width: min(420px, 60%); aspect-ratio: 1; transform: translateY(-50%); pointer-events: none; background: url("/LandingPage/videos/fantasi-emblem.webp?v=2") center / contain no-repeat; filter: grayscale(0.3) brightness(0.9) blur(1px); opacity: 0.1; }


/* 04 · the art of discretion: heading and close */
main.dc .dc-art { position: relative; padding: var(--section-y) 0 calc(var(--section-y) * 0.8); background:
  radial-gradient(ellipse 50% 30% at 22% 18%, rgba(107, 26, 48, 0.32), transparent 72%),
  radial-gradient(ellipse 50% 28% at 80% 52%, rgba(74, 44, 82, 0.42), transparent 72%),
  radial-gradient(ellipse 60% 24% at 40% 88%, rgba(199, 166, 92, 0.08), transparent 72%),
  linear-gradient(180deg, var(--noir) 0%, #140f13 30%, #120e14 60%, var(--noir) 100%); }
.art-head { max-width: 720px; margin: 0 auto clamp(70px, 9vw, 130px); text-align: center; position: relative; isolation: isolate; }
/* the unicorn's shadow behind the heading: the emblem as a soft gold silhouette */
.art-head::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: clamp(300px, 34vw, 520px); aspect-ratio: 1; transform: translate(-50%, -54%);
  background: radial-gradient(circle at 50% 40%, rgba(228, 198, 135, 0.95), rgba(168, 136, 74, 0.6) 70%);
  -webkit-mask: url("/LandingPage/videos/fantasi-emblem.webp") center / contain no-repeat; mask: url("/LandingPage/videos/fantasi-emblem.webp") center / contain no-repeat;
  opacity: 0.09; filter: blur(1.5px) drop-shadow(0 0 40px rgba(228, 198, 135, 0.5)); pointer-events: none; animation: artShade 7s ease-in-out infinite alternate; }
.art-head::after { content: ""; position: absolute; z-index: -2; left: 50%; top: 46%; width: clamp(320px, 40vw, 620px); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(199, 166, 92, 0.1), transparent 62%); pointer-events: none; }
@keyframes artShade { from { opacity: 0.07; transform: translate(-50%, -54%) scale(0.98); } to { opacity: 0.12; transform: translate(-50%, -54%) scale(1.02); } }
@media (prefers-reduced-motion: reduce) { .art-head::before { animation: none; } }
main.dc .art-head .dc-h { max-width: none; margin: 18px 0 16px; font-size: clamp(56px, 7vw, 108px); line-height: 0.98; }
.art-head p { margin: 0; font-family: var(--type-serif); font-size: var(--fs-lg); color: var(--text-2); }
.art-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 24px 60px; flex-wrap: wrap; padding-top: 34px; border-top: 1px solid rgba(228, 198, 135, 0.16); }
.art-foot p { max-width: 62ch; margin: 0; font-family: var(--type-serif); font-style: italic; font-size: 17px; line-height: 1.6; color: var(--text-2); }
.art-link { flex-shrink: 0; font-family: var(--type-serif); font-size: 15px; color: var(--c-gold-bright); border-bottom: 1px solid rgba(228, 198, 135, 0.4); padding-bottom: 4px; transition: border-color var(--dur-2) ease; }
.art-link span { display: inline-block; margin-left: 8px; transition: transform var(--dur-3) var(--ease-out); }
.art-link:hover { border-color: var(--c-gold-bright); }
.art-link:hover span { transform: translateX(4px); }

/* ==========================================================================
   04 · The art of discretion, as scenes. Each chapter fills the screen with
   its photograph blurred behind it; a staggered Seasons heading on the left,
   the sharp photograph framed in the middle with one glass card floating on
   it (the demonstration), and the detail on the right. Each pins, and the
   next slides over it.
   ========================================================================== */
main.dc .dc-art { padding-bottom: calc(var(--section-y) * 0.8); }
.as-scenes { position: relative; margin-top: 10px; }
.as-scene { position: sticky; top: 0; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 470px) minmax(0, 0.95fr); align-items: center; gap: clamp(28px, 4vw, 64px);
  height: 100vh; height: 100svh; min-height: 720px; padding: 110px max(var(--gutter), calc((100vw - 1360px) / 2)) 80px;
  background: var(--c-noir); box-shadow: 0 -40px 90px rgba(0, 0, 0, 0.6); }
.as-bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.as-bg img { position: absolute; inset: -14%; width: 128%; height: 128%; object-fit: cover; filter: blur(48px) saturate(1.2) brightness(0.48); }
.as-scene::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; mix-blend-mode: screen; background: radial-gradient(ellipse 45% 60% at 50% 50%, var(--as-tint), transparent 72%); }
.as-scene[data-tint="wine"] { --as-tint: rgba(107, 26, 48, 0.6); }
.as-scene[data-tint="plum"] { --as-tint: rgba(84, 46, 96, 0.65); }
.as-scene[data-tint="gold"] { --as-tint: rgba(199, 166, 92, 0.24); }
.as-scene::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 75% 85% at 50% 50%, transparent 40%, rgba(11, 10, 12, 0.6) 100%); }
.as-label { position: absolute; top: 96px; left: max(var(--gutter), calc((100vw - 1360px) / 2)); font-family: var(--type-serif); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-gold-bright); }

/* the staggered heading: three lines, the middle one pushed right */
.as-title { margin: 0; font-family: var(--type-serif); font-style: normal; font-weight: 400; font-size: clamp(44px, 4.5vw, 76px); line-height: 1.04; letter-spacing: -0.01em; color: var(--text-1); }
.as-title span, .as-title em { display: block; white-space: nowrap; }
.as-title .i2 { padding-left: 1.4em; }
.as-title em { font-family: var(--type-display); font-weight: 300; font-style: italic; background: var(--accent-text); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: 0.08em; }

/* the frame and the glass card floating on it */
.as-frame { position: relative; align-self: center; }
.as-photo { position: relative; margin: 0; aspect-ratio: 1 / 1.08; overflow: hidden; border-radius: 22px; box-shadow: 0 50px 100px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(242, 236, 223, 0.12); isolation: isolate; }
.as-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.86) contrast(1.04); transition: filter 1.4s var(--ease-out), transform 1.6s var(--ease-out); }
.as-card { position: absolute; z-index: 2; top: 9%; left: 50%; width: min(400px, 112%); transform: translateX(-38%); padding: 16px 18px; border-radius: 20px; background: rgba(36, 30, 36, 0.62); -webkit-backdrop-filter: blur(22px) saturate(1.3); backdrop-filter: blur(22px) saturate(1.3); box-shadow: 0 24px 50px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(242, 236, 223, 0.1); }
.as-card-row { display: flex; align-items: center; gap: 12px; }
.as-card-text { display: grid; gap: 4px; flex: 1; min-width: 0; }
.as-card-text b { font-family: var(--type-serif); font-weight: 400; font-size: 18px; color: var(--text-1); }
.as-card-sub { font-family: var(--type-serif); font-size: 13.5px; line-height: 1.45; color: rgba(242, 236, 223, 0.72); }
.as-av { display: grid; place-items: center; flex: 0 0 38px; height: 38px; border-radius: 50%; font-family: var(--type-display); font-style: italic; font-size: 17px; color: var(--text-1); background: linear-gradient(140deg, #4a2c52, #2a1830); box-shadow: 0 0 0 2px rgba(36, 30, 36, 0.9), 0 0 0 3.5px var(--c-gold); }
.as-av--wine { background: linear-gradient(140deg, var(--c-wine-bright), var(--c-wine)); }
.as-pill { margin-left: 6px; padding: 2px 8px; border-radius: var(--radius-pill); font-style: normal; font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tier-black); box-shadow: inset 0 0 0 1px rgba(176, 68, 95, 0.6); vertical-align: 3px; }
/* the switch, like the app's */
.as-toggle { position: relative; flex: 0 0 52px; height: 30px; padding: 0; border: 0; border-radius: var(--radius-pill); background: rgba(242, 236, 223, 0.18); cursor: pointer; transition: background var(--dur-3) ease; }
.as-toggle i { position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--c-cream); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); transition: transform var(--dur-3) var(--ease-spring), background var(--dur-3) ease; }
.as-toggle[aria-checked="true"] { background: var(--accent-fill); }
.as-toggle[aria-checked="true"] i { transform: translateX(22px); background: var(--c-noir); }
.as-demo { position: absolute; left: 0; right: 0; bottom: -30px; text-align: center; font-family: var(--type-serif); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(242, 236, 223, 0.5); }

/* the right-hand detail */
.as-side { align-self: center; max-width: 360px; justify-self: end; }
.as-side > p { margin: 0 0 22px; font-family: var(--type-serif); font-size: 17px; line-height: 1.6; color: rgba(242, 236, 223, 0.88); }
.as-specs { margin: 0 0 26px; }
.as-specs div { padding: 11px 0; border-top: 1px solid rgba(242, 236, 223, 0.12); }
.as-specs dt { font-family: var(--type-serif); font-size: 15.5px; color: var(--text-1); }
.as-specs dt small { margin-left: 8px; font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-gold-bright); }
.as-specs dd { margin: 3px 0 0; font-family: var(--type-serif); font-size: 13.5px; line-height: 1.5; color: rgba(242, 236, 223, 0.6); }

/* I. approval lifts the blur; the viewer's name appears across it */
.as-photo--reveal img { filter: blur(20px) brightness(0.7) saturate(0.85); transform: scale(1.12); }
.as-photo--reveal[data-on="true"] img { filter: brightness(0.88) contrast(1.04); transform: scale(1.02); }
.as-mark { position: absolute; inset: -40%; z-index: 1; display: flex; flex-direction: column; justify-content: center; gap: 22px; transform: rotate(-24deg); opacity: 0; transition: opacity 1s ease 0.6s; pointer-events: none; }
.as-mark span { white-space: nowrap; font-family: var(--type-serif); font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(255, 255, 255, 0.22); }
.as-mark span:nth-child(even) { margin-left: -70px; }
.as-photo--reveal[data-on="true"] .as-mark { opacity: 1; }

/* II. the plum silk draws across the photograph */
.as-silk { position: absolute; inset: 0 -30% 0 0; z-index: 1; display: grid; place-items: center; padding-right: 23%;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  background: linear-gradient(100deg, transparent 0%, rgba(255, 220, 250, 0.07) 18%, transparent 30%, rgba(255, 220, 250, 0.05) 52%, transparent 62%, rgba(255, 220, 250, 0.06) 80%, transparent 92%), linear-gradient(180deg, rgba(60, 30, 70, 0.86), rgba(28, 12, 34, 0.94));
  background-size: 220% 100%, 100% 100%; animation: artSilk 14s ease-in-out infinite alternate;
  -webkit-mask-image: linear-gradient(90deg, #000 70%, transparent 100%); mask-image: linear-gradient(90deg, #000 70%, transparent 100%);
  transform: translateX(-102%); transition: transform 1.5s cubic-bezier(0.65, 0, 0.2, 1); }
.as-silk span { font-family: var(--type-serif); font-style: italic; font-weight: 300; font-size: clamp(40px, 3.6vw, 58px); color: #f1e2f6; opacity: 0; transition: opacity 0.8s ease; }
.as-photo--veil[data-on="true"] .as-silk { transform: none; }
.as-photo--veil[data-on="true"] .as-silk span { opacity: 1; transition-delay: 0.9s; }
.as-photo--veil[data-on="true"] img { filter: brightness(0.55) blur(4px); transform: scale(1.06); }
@keyframes artSilk { from { background-position: 0% 0, 0 0; } to { background-position: 100% 0, 0 0; } }

/* III. the chat card, and its messages leaving */
.as-card--chat { top: auto; bottom: 8%; }
.as-chat-head { padding-bottom: 12px; border-bottom: 1px solid rgba(242, 236, 223, 0.1); }
.as-timer { font-family: var(--type-serif); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: #e6b8c6; }
.as-timer::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: currentColor; vertical-align: 1px; box-shadow: 0 0 8px currentColor; }
.as-vanish { flex-shrink: 0; padding: 7px 14px; border: 0; border-radius: var(--radius-pill); background: var(--accent-fill); font-family: var(--type-serif); font-size: 12px; color: var(--c-noir); cursor: pointer; transition: transform var(--dur-2) var(--ease-spring); }
.as-vanish:hover { transform: translateY(-1px); }
.as-vanish:active { transform: scale(0.95); }
.as-chat { position: relative; display: grid; gap: 7px; padding-top: 12px; }
main.dc .as-chat p { justify-self: start; max-width: 82%; margin: 0; padding: 8px 12px; border-radius: 14px 14px 14px 4px; font-family: var(--type-serif); font-size: 14px; line-height: 1.4; color: var(--text-1); background: rgba(242, 236, 223, 0.1);
  transition: opacity 1.1s ease, filter 1.1s ease, transform 1.2s var(--ease-out); transition-delay: var(--d, 0s); }
main.dc .as-chat p.mine { justify-self: end; border-radius: 14px 14px 4px 14px; color: #2a1d18; background: var(--accent-fill); }
.as-card--chat[data-gone="true"] .as-chat p { opacity: 0; filter: blur(8px); transform: translateY(-8px) scale(0.98); }
.as-after { position: absolute; inset: 12px 0 0; display: grid; place-items: center; font-family: var(--type-serif); font-style: italic; font-size: 30px; color: rgba(242, 236, 223, 0.75); opacity: 0; pointer-events: none; transition: opacity 1s ease; }
.as-card--chat[data-gone="true"] .as-after { opacity: 1; transition-delay: 1.2s; }

/* the chapter counter, bottom left */
.as-count { position: sticky; bottom: 26px; z-index: 20; display: flex; align-items: center; gap: 4px; height: 36px; margin-top: -36px; padding-left: max(var(--gutter), calc((100vw - 1360px) / 2)); pointer-events: none; font-family: var(--type-serif); font-size: 12px; letter-spacing: 0.1em; }
.as-count a { pointer-events: auto; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: rgba(242, 236, 223, 0.45); transition: color var(--dur-2) ease, background var(--dur-3) ease; }
.as-count a:hover { color: var(--text-1); }
.as-count a[aria-current="step"] { color: var(--c-noir); background: var(--accent-fill); }
.as-count-of { margin-left: 4px; color: rgba(242, 236, 223, 0.45); }

/* arriving */
.as-scene :is(.as-label, .as-title span, .as-title em, .as-side, .as-photo, .as-card) { transition-property: opacity, transform; transition-duration: 0.8s; transition-timing-function: var(--ease-out); }
.as-scenes.js .as-scene:not(.in) :is(.as-label, .as-title span, .as-title em, .as-side) { opacity: 0; transform: translateY(24px); }
.as-scenes.js .as-scene:not(.in) .as-photo { opacity: 0; transform: scale(0.95); }
.as-scenes.js .as-scene:not(.in) .as-card { opacity: 0; transform: translate(-38%, 20px); }
.as-scene.in .as-title .i2 { transition-delay: 0.08s; }
.as-scene.in .as-title em { transition-delay: 0.16s; }
.as-scene.in .as-side { transition-delay: 0.24s; }
.as-scene.in .as-card { transition-delay: 0.45s; }

.art-foot { margin-top: clamp(60px, 7vw, 100px); }

@media (max-width: 1100px), (max-height: 740px) {
  .as-scene { position: relative; grid-template-columns: 1fr; height: auto; min-height: 0; gap: 34px; padding: 120px var(--gutter) 90px; box-shadow: none; }
  .as-label { top: 70px; }
  .as-frame { width: min(460px, 100%); justify-self: center; margin-bottom: 30px; }
  .as-side { max-width: 560px; justify-self: start; }
  .as-count { display: none; }
}
@media (max-width: 520px) {
  .as-card { width: auto; left: 10px; right: 10px; transform: none; }
  .as-scenes.js .as-scene:not(.in) .as-card { transform: translateY(20px); }
  .as-title .i2 { padding-left: 0.9em; }
}
@media (prefers-reduced-motion: reduce) {
  .as-scenes.js .as-scene:not(.in) :is(.as-label, .as-title span, .as-title em, .as-side, .as-photo, .as-card) { opacity: 1; transform: none; }
  .as-silk { animation: none; transition: none; }
  .as-photo img, .as-mark, .as-chat p, .as-after { transition: none !important; }
}

/* ---------- 02 permission to reveal: an expanding triptych ---------- */
.pr { display: flex; gap: 12px; height: clamp(480px, 50vw, 640px); }
.pr-panel { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; border-radius: 28px; isolation: isolate; background: #140f13; box-shadow: var(--shadow-3), inset 0 0 0 1px rgba(242, 236, 223, 0.1); transition: flex 0.9s cubic-bezier(0.65, 0, 0.2, 1), box-shadow var(--dur-3) ease; }
.pr-panel.open { flex: 4.2 1 0; box-shadow: var(--shadow-4), inset 0 0 0 1px rgba(228, 198, 135, 0.3); }
.pr-media { position: absolute; inset: 0; z-index: -1; }
.pr-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transition: filter 1.2s var(--ease-out), transform 1.6s var(--ease-out); }
.pr-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 10, 12, 0.25) 0%, transparent 35%, rgba(11, 10, 12, 0.85) 100%); }
/* the same photograph, three states: hidden, deciding, revealed */
.pr-panel[data-step="1"] .pr-media img { filter: blur(26px) brightness(0.55) saturate(0.7); transform: scale(1.2); }
.pr-panel[data-step="2"] .pr-media img { filter: blur(16px) brightness(0.6) saturate(0.8); transform: scale(1.14); }
.pr-panel[data-step="3"] .pr-media img { filter: blur(26px) brightness(0.5) saturate(0.7); transform: scale(1.2); }
.pr[data-decision="approved"] .pr-panel[data-step="3"] .pr-media img { filter: brightness(0.82) contrast(1.04); transform: scale(1.02); }
.pr-mark { opacity: 0; }
.pr[data-decision="approved"] .pr-mark { opacity: 1; transition-delay: 0.6s; }
.pr[data-decision="declined"] .pr-panel[data-step="2"] .pr-media img { filter: blur(30px) brightness(0.35) saturate(0.5); }
.pr[data-decision="declined"] .pr-panel[data-step="3"] .pr-media img { filter: blur(30px) brightness(0.35) saturate(0.5); transform: scale(1.2); }
.pr-mark { position: absolute; inset: -40%; display: flex; flex-direction: column; justify-content: center; gap: 22px; transform: rotate(-24deg); pointer-events: none; transition: opacity 0.8s ease; }
.pr-mark span { white-space: nowrap; font-family: var(--type-serif); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(255, 255, 255, 0.22); }
.pr-mark span:nth-child(even) { margin-left: -70px; }
/* the tab: the whole panel while folded, a numeral once open */
.pr-tab { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 26px 0; border: 0; border-radius: inherit; background: none; color: var(--text-1); cursor: pointer; transition: background var(--dur-3) ease; }
.pr-tab:hover { background: rgba(242, 236, 223, 0.04); }
.pr-n { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-family: var(--type-serif); font-style: italic; font-size: 15px; color: var(--c-gold-bright); box-shadow: inset 0 0 0 1px rgba(228, 198, 135, 0.45); background: rgba(11, 10, 12, 0.35); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.pr-v { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--type-serif); font-style: normal; font-weight: 400; font-size: 26px; white-space: nowrap; color: rgba(242, 236, 223, 0.85); transition: opacity 0.4s ease; }
.pr-panel.open .pr-tab { inset: 24px auto auto 24px; width: 40px; height: 40px; padding: 0; justify-content: center; pointer-events: none; }
.pr-panel.open .pr-v { opacity: 0; position: absolute; }
.pr-panel.open .pr-n { color: var(--c-noir); background: var(--accent-fill); box-shadow: none; }
/* the story, once a panel is open */
.pr-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: clamp(24px, 3vw, 40px); max-width: 560px; opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity 0.4s ease, transform 0.6s var(--ease-out); }
.pr-panel.open .pr-body { opacity: 1; transform: none; pointer-events: auto; transition: opacity 0.7s ease 0.45s, transform 0.9s var(--ease-out) 0.45s; }
.pr-body h3 { margin: 0 0 12px; font-family: var(--type-serif); font-style: normal; font-weight: 400; font-size: clamp(36px, 3.6vw, 56px); line-height: 1.02; color: var(--text-1); }
.pr-body h3 em { font-family: var(--type-display); font-weight: 300; font-style: italic; background: var(--accent-text); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: 0.06em; }
main.dc .pr-body p { max-width: 40ch; margin: 0; font-family: var(--type-serif); font-size: 16.5px; line-height: 1.6; color: rgba(242, 236, 223, 0.86); }
.pr-chip { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 16px; padding: 6px 14px 6px 6px; border-radius: var(--radius-pill); font-family: var(--type-serif); font-size: 13px; color: var(--text-1); background: rgba(36, 30, 36, 0.6); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px rgba(242, 236, 223, 0.12); }
.pr-chip i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-family: var(--type-display); font-size: 13px; background: linear-gradient(140deg, var(--c-wine-bright), var(--c-wine)); }
.pr-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.pr-demo { display: block; margin-top: 16px; font-family: var(--type-serif); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(242, 236, 223, 0.5); }
@media (max-width: 760px) {
  .pr { flex-direction: column; height: auto; gap: 10px; }
  .pr-panel { flex: none; height: 78px; transition: height 0.8s cubic-bezier(0.65, 0, 0.2, 1); }
  .pr-panel.open { flex: none; height: 470px; }
  .pr-tab { flex-direction: row; justify-content: flex-start; gap: 16px; padding: 0 20px; }
  .pr-v { writing-mode: horizontal-tb; transform: none; font-size: 22px; }
  .pr-panel.open .pr-tab { inset: 18px auto auto 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .pr-panel, .pr-media img, .pr-body, .pr-mark { transition: none !important; }
}

/* the unicorn returns to the invitation */
main.dc .dc-close .container::after { display: block; }