:root { --ink:#18244a; --paper:#e9f1ff; --accent:#ef6e91; --panel:#8cc9e9; --soft:#ffc7d5; --line:rgba(24,36,74,.24); }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"DM Sans",sans-serif; transition:background .35s ease,color .35s ease; }
body[data-theme="berry"] { --ink:#3d2030; --paper:#fff; --accent:#83cba9; --panel:#e9879d; --soft:#f4cf58; }
.shell { width:min(1220px,calc(100% - 48px)); margin:0 auto; padding:32px 0 22px; }
.topbar, .bottom-note, .card-footer { display:flex; justify-content:space-between; align-items:center; }
.topbar { border-bottom:1px solid var(--line); padding-bottom:16px; font-size:11px; letter-spacing:.16em; text-transform:uppercase; }
.eyebrow, .hint, .kicker, .card-label, .note-index, .tip span { margin:0; font-weight:700; }
.hint { letter-spacing:.04em; text-transform:none; }
.dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-left:10px; background:var(--accent); }
.intro { display:flex; justify-content:space-between; align-items:end; gap:40px; padding:70px 0 42px; }
.kicker { color:var(--accent); font-size:14px; letter-spacing:.12em; margin-bottom:18px; }
h1 { margin:0; font:600 clamp(48px,7vw,96px)/.9 "Space Grotesk",sans-serif; letter-spacing:-.075em; }
h1 em { color:var(--accent); font-style:normal; }
.intro-copy { width:min(280px,100%); margin:0 0 4px; font-size:14px; line-height:1.55; }
.style-picker { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; margin-bottom:28px; }
.style-button { position:relative; overflow:hidden; display:grid; grid-template-columns:24px 1fr; gap:0 10px; align-items:center; padding:16px; border:1px solid var(--line); border-radius:18px; background:transparent; color:inherit; text-align:left; font:inherit; cursor:pointer; transition:transform .25s ease,background .25s ease; }
.style-button:hover { transform:translateY(-3px); }
.style-button.is-active { background:var(--ink); color:var(--paper); border-color:var(--ink); }
.style-button span:not(.swatch) { font-size:14px; font-weight:700; }
.style-button small { grid-column:2; font-size:11px; opacity:.65; margin-top:3px; }
.view-switch { display:flex; justify-content:flex-end; gap:6px; margin:-8px 0 20px; }
.view-button { padding:8px 12px; border:1px solid var(--line); border-radius:100px; background:transparent; color:inherit; font:700 10px "DM Sans",sans-serif; letter-spacing:.04em; cursor:pointer; }
.view-button.is-active { background:var(--ink); color:var(--paper); border-color:var(--ink); }
.swatch { width:22px; height:22px; border-radius:50%; background:var(--panel); border:3px solid var(--paper); box-shadow:0 0 0 1px var(--line); }
.candy-swatch { background:linear-gradient(135deg,#8cc9e9 50%,#ef6e91 50%); }
.berry-swatch { background:linear-gradient(135deg,#e9879d 50%,#83cba9 50%); }
.card-stage { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(240px,.5fr); gap:18px; }
.card-visual { position:relative; min-height:560px; overflow:hidden; border-radius:30px; background:var(--panel); isolation:isolate; }
.card-content { position:relative; z-index:2; min-height:560px; display:grid; grid-template-columns:110px 1fr; grid-template-rows:auto 1fr auto auto; gap:0 28px; padding:42px; }
.avatar { width:92px; height:92px; display:grid; place-items:center; border-radius:50%; background:var(--accent); color:var(--paper); font:600 45px "Space Grotesk",sans-serif; transform:rotate(-8deg); }
.card-label { font-size:11px; letter-spacing:.13em; opacity:.65; padding-top:4px; }
h2 { margin:8px 0 2px; font:600 clamp(42px,6vw,82px)/.9 "Space Grotesk",sans-serif; letter-spacing:-.08em; }
.role { margin:12px 0 0; font-size:14px; }
.statement { grid-column:1/-1; align-self:end; margin-bottom:32px; font:400 clamp(23px,3.4vw,48px)/1.05 "Space Grotesk",sans-serif; letter-spacing:-.055em; }
.statement strong { color:var(--accent); font-weight:600; }
.card-links { display:flex; flex-wrap:wrap; gap:9px; grid-column:1/-1; }
.card-links a { padding:11px 15px; border:1px solid var(--ink); border-radius:100px; color:inherit; text-decoration:none; font-size:12px; font-weight:700; background:color-mix(in srgb,var(--paper) 22%,transparent); }
.card-links a:hover { background:var(--ink); color:var(--paper); }
.card-links span { color:var(--accent); margin-right:4px; }
.card-footer { grid-column:1/-1; margin-top:44px; padding-top:13px; border-top:1px solid var(--line); font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.card-mark { display:grid; place-items:center; width:22px; height:22px; border:1px solid var(--ink); border-radius:50%; font-size:17px; }
.shape { position:absolute; z-index:1; border-radius:50%; filter:saturate(1.1); }
.shape-one { width:340px; height:340px; right:-90px; top:-110px; background:var(--soft); }
.shape-two { width:170px; height:170px; right:18%; bottom:-60px; background:var(--accent); }
.shape-three { width:75px; height:75px; left:48%; top:17%; border:2px solid var(--accent); }
.serial { position:absolute; z-index:3; top:25px; right:30px; font-size:10px; letter-spacing:.14em; transform:rotate(90deg) translateX(100%); transform-origin:right top; opacity:.62; }
.selection-note { display:flex; flex-direction:column; justify-content:flex-end; padding:30px 25px; border:1px solid var(--line); border-radius:30px; min-height:560px; }
.note-index { color:var(--accent); font-size:11px; letter-spacing:.14em; }
.note-index strong { color:var(--ink); }
h3 { margin:14px 0 12px; font:600 40px/.95 "Space Grotesk",sans-serif; letter-spacing:-.07em; }
.selection-note > p:not(.note-index):not(.tip) { margin:0; font-size:14px; line-height:1.6; }
.note-line { height:1px; background:var(--line); margin:28px 0 18px; }
.tip { margin:0; font-size:11px; line-height:1.5; opacity:.72; }
.tip span { display:block; color:var(--accent); letter-spacing:.12em; margin-bottom:5px; }
.tip strong { display:block; margin-bottom:4px; color:var(--ink); opacity:1; }
.bottom-note { padding-top:18px; font-size:11px; opacity:.6; letter-spacing:.04em; }
.page-link { color:var(--accent); font-weight:700; text-decoration:none; border-bottom:1px solid var(--accent); }
/* ---- Vertical flip card (mobile direction) ---- */
.mobile-stage { display:none; grid-template-columns:minmax(0,1.5fr) minmax(240px,.5fr); gap:18px; align-items:stretch; }
body.view-mobile .mobile-stage { display:grid; }
body.view-mobile .card-stage { display:none; }
.flip-stage { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:34px; min-height:640px; padding:48px 20px 40px; border:1px solid var(--line); border-radius:30px; }
.flip-scene { position:relative; width:min(320px,80vw); perspective:1500px; }
.flip-card { position:relative; z-index:1; aspect-ratio:5/8; cursor:grab; outline:none; touch-action:pan-y; user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent; }
.flip-card.is-dragging { cursor:grabbing; }
.flip-card:focus-visible { outline:3px solid var(--accent); outline-offset:6px; border-radius:26px; }
.flip-inner { position:absolute; inset:0; transform-style:preserve-3d; transition:transform .65s cubic-bezier(.2,.75,.25,1); will-change:transform; }
.flip-card.is-dragging .flip-inner { transition:none; }
.face { position:absolute; inset:0; display:flex; flex-direction:column; overflow:hidden; padding:24px 22px 20px; border-radius:26px; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.face-front { background:var(--panel); isolation:isolate; }
.face-front:before, .face-front:after { content:""; position:absolute; z-index:-1; border-radius:50%; }
.face-front:before { width:200px; height:200px; top:-75px; right:-70px; background:var(--soft); }
.face-front:after { width:110px; height:110px; top:44%; right:-48px; background:var(--accent); }
.face-serial { position:absolute; z-index:1; top:52px; right:18px; font-size:9px; font-weight:700; letter-spacing:.14em; transform:rotate(90deg) translateX(100%); transform-origin:right top; opacity:.55; }
.face-top { display:flex; justify-content:space-between; gap:10px; font-size:9px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.drag-hint { color:var(--accent); }
.face-avatar { width:72px; height:72px; display:grid; place-items:center; margin-top:34px; border-radius:50%; background:var(--accent); color:var(--paper); font:600 34px "Space Grotesk",sans-serif; transform:rotate(-8deg); }
.face-label { margin:26px 0 0; font-size:10px; font-weight:700; letter-spacing:.14em; opacity:.7; }
.face h2 { margin:8px 0 0; font:600 44px/.9 "Space Grotesk",sans-serif; letter-spacing:-.07em; }
.face-role { margin:10px 0 0; font-size:12px; }
.face-statement { margin:auto 0 20px; font:400 25px/1.06 "Space Grotesk",sans-serif; letter-spacing:-.05em; }
.face-statement strong { color:var(--accent); font-weight:600; }
.face-foot { display:flex; justify-content:space-between; gap:10px; padding-top:12px; border-top:1px solid var(--line); font-size:8.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.face-back { background:#fff; color:var(--ink); transform:rotateY(180deg); }
.face-back:after { content:""; position:absolute; z-index:0; left:-12%; right:-12%; bottom:26px; height:12px; background:var(--soft); transform:rotate(-5deg); opacity:.9; }
.back-color-ribbon { position:absolute; z-index:0; top:58px; right:-44px; width:170px; height:22px; background:var(--accent); transform:rotate(-28deg); opacity:.9; }
.back-color-orb { position:absolute; z-index:0; top:54%; left:16px; width:26px; height:26px; border-radius:50%; background:var(--soft); box-shadow:18px 10px 0 -8px var(--accent); }
.face-back .face-top, .face-back .face-label, .face-back h2, .face-back .face-role, .face-back .back-qr, .face-back .back-links, .face-back .face-foot { position:relative; z-index:1; }
.face-back .face-label { margin-top:22px; }
.face-back .face-foot { border-top-color:color-mix(in srgb,var(--ink) 18%,transparent); }
.back-qr { display:flex; flex-direction:column; align-items:center; width:104px; margin:18px 0 0 auto; padding:5px 5px 2px; border:3px solid var(--accent); box-shadow:6px 6px 0 var(--soft); background:#fff; }
.back-qr img { display:block; width:100%; height:auto; }
.back-qr small { padding:3px 0 1px; font-size:7px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; opacity:.7; }
.back-links { display:grid; margin:auto 0 16px; }
.back-links > * { display:grid; grid-template-columns:66px 1fr 14px; gap:8px; align-items:center; padding:10px 0; border-top:1px solid color-mix(in srgb,var(--ink) 18%,transparent); color:inherit; text-decoration:none; }
.back-links > *:last-child { border-bottom:1px solid color-mix(in srgb,var(--ink) 18%,transparent); }
.back-links span { font-size:8px; font-weight:700; letter-spacing:.08em; opacity:.6; }
.back-links b { overflow:hidden; font-size:11.5px; font-weight:500; text-overflow:ellipsis; white-space:nowrap; }
.back-links i { font-style:normal; color:var(--accent); text-align:right; }
.back-links .multi b { display:flex; gap:14px; overflow:visible; }
.back-links .multi b a { color:inherit; text-decoration:none; border-bottom:1.5px solid var(--accent); padding-bottom:1px; }
/* dense: back face with 5+ contact rows */
.face-back.dense .face-label { margin-top:12px; }
.face-back.dense h2 { font-size:38px; }
.face-back.dense .back-qr { width:90px; margin-top:12px; }
.face-back.dense .back-links > * { padding:8px 0; }
.face-back.dense .face-foot { padding-top:10px; }
.flip-shadow { position:absolute; left:12%; right:12%; bottom:-30px; height:24px; border-radius:50%; background:color-mix(in srgb,var(--ink) 24%,transparent); filter:blur(14px); }
.stage-hint { margin:0; font-size:11px; letter-spacing:.03em; opacity:.65; text-align:center; }
.mobile-note { display:flex; flex-direction:column; justify-content:flex-end; padding:30px 25px; border:1px solid var(--line); border-radius:30px; }
@media (max-width:760px) { .shell { width:min(100% - 28px,560px); padding-top:20px; } .intro { display:block; padding:48px 0 30px; } .intro-copy { margin-top:25px; } .card-stage { display:block; } .card-visual,.card-content { min-height:520px; } .card-content { padding:28px; grid-template-columns:74px 1fr; gap:0 18px; } .avatar { width:66px; height:66px; font-size:32px; } h2 { font-size:48px; } .selection-note { min-height:auto; margin-top:12px; padding:24px; } .mobile-stage { grid-template-columns:1fr; gap:12px; } .flip-stage { min-height:auto; padding:40px 10px 48px; border-radius:24px; } .flip-scene { width:min(310px,86vw); } .mobile-note { margin-top:0; padding:28px 24px; border-radius:24px; } .bottom-note { align-items:flex-start; gap:15px; flex-direction:column; } .view-switch { justify-content:stretch; } .view-button { flex:1; } }