/* ==========================================================================
   CONTACT CARDS — the public card. Standout's brand: cream, sage, forest, Exposure for the name.
   Everything is scoped under .cc, so the editor can show the same card inside its own page.
   The first screen's heights are counted in public/shared/card.js (FOLD, H): change one, change both.
   ========================================================================== */
@font-face { font-family: 'Exposure'; src: url('/fonts/exposure.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

.cc {
  --cream: #F8F6EF; --paper: #FFFFFF; --sand: #F1EFE7; --line: #E5E1D6;
  --ink: #1F2A22; --muted: #6B7468; --soft: #52594F; --forest: #1F3D2B; --forest-2: #2F5B3C; --mint: #E8EEE3; --green: #2F9E5B;
  --r: 20px;
  box-sizing: border-box; width: 100%; max-width: 440px; margin: 0 auto; padding: 22px 16px 28px;
  color: var(--ink); background: var(--cream);
  font: 400 15px/1.4 -apple-system, BlinkMacSystemFont, 'SF Pro Text', Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
.cc *, .cc *::before, .cc *::after { box-sizing: border-box; }
.cc a { color: inherit; text-decoration: none; }
.cc svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cc h1, .cc p { margin: 0; }
.cc :focus-visible { outline: 2px solid var(--forest-2); outline-offset: 2px; }

body.cc-body { margin: 0; background: #F8F6EF; min-height: 100vh; min-height: 100dvh; }

/* head: 58 photo + 12 = 70 */
.cc-head { display: flex; align-items: center; gap: 12px; height: 58px; margin-bottom: 12px; }
.cc-photo { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; flex: none; background: linear-gradient(160deg, #C9D3C4, #8A9C8B); }
.cc-photo.is-empty { display: grid; place-items: center; color: #fff; font: 500 20px/1 'Exposure', Georgia, serif; }
.cc-head h1 { font: 400 30px/1 'Exposure', Georgia, serif; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-head p { font-size: 13px; color: var(--muted); margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-head > div { min-width: 0; }

/* live line: 26 + 12 = 38 */
.cc-live { display: inline-flex; align-items: center; gap: 6px; height: 26px; margin-bottom: 12px !important; padding: 0 10px; border-radius: 99px;
  background: var(--mint); color: var(--forest-2); font-size: 12.5px; white-space: nowrap; max-width: 100%; overflow: hidden; }
.cc-status { display: inline-flex; align-items: center; gap: 6px; }
.cc-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.cc-status.is-later::before { background: #B9C8B7; }
.cc-live { gap: 0 !important; }
.cc-status:not([hidden]) + span::before { content: '·'; margin: 0 .4em; }

/* actions: 46 button + 4 + 14 label + 14 = 78 */
.cc-acts { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; margin-bottom: 14px; }
.cc-act { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11.5px; line-height: 14px; color: var(--soft); }
.cc-act span { display: grid; place-items: center; width: 100%; height: 46px; border-radius: 14px; background: var(--paper); border: 1px solid var(--line); color: var(--forest); transition: transform .15s; }
.cc-act:active span { transform: scale(.96); }

/* book: 46 + 10 = 56 */
.cc-book { display: flex; align-items: center; justify-content: center; height: 46px; margin-bottom: 10px; border-radius: 14px;
  background: var(--forest); color: #fff !important; font-weight: 600; font-size: 15px; transition: transform .15s; }
.cc-book:active { transform: scale(.98); }
.cc-book span { font-weight: 400; opacity: .85; }
.cc-book span:not(:empty)::before { content: '·'; margin: 0 .4em; }

/* the first screen's widgets: 2 columns, 140 px rows, 10 px gaps. dense: one wide + two squares always fit two rows */
.cc-grid { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 140px; grid-auto-flow: row dense; gap: 10px; margin-top: 14px; }
.cc-w { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 6px; min-width: 0; overflow: hidden;
  padding: 12px; border-radius: var(--r); background: var(--paper); border: 1px solid var(--line); background-size: cover; background-position: center; }
.cc-w.is-wide, .cc-w.is-tile { grid-column: span 2; }
.cc-w small { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cc-w b { font: 400 22px/1.05 'Exposure', Georgia, serif; }
.cc-w p { font-size: 12px; color: var(--soft); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cc-w > svg { position: absolute; right: 12px; bottom: 12px; color: var(--muted); }
.cc-w.is-dark { background: var(--forest); border-color: var(--forest); color: var(--cream); }
.cc-w.is-dark small { color: #B9C8B7; } .cc-w.is-dark p { color: #D7E0D4; }
.cc-w.has-img { color: #fff; border: 0; }
.cc-w.has-img::before { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 30%, rgba(0,0,0,.55)); }
.cc-w.has-img > * { position: relative; } .cc-w.has-img small, .cc-w.has-img p { color: rgba(255,255,255,.85); }
a.cc-w { transition: transform .15s; } a.cc-w:active { transform: scale(.98); }

/* below the fold: the same widgets as full-width tiles */
.cc-more { height: 24px; display: flex; align-items: end; justify-content: center; font-size: 11px; color: #9AA096; letter-spacing: .04em; }
.cc-more::after { content: '↓'; margin-left: 4px; }
.cc-below { display: grid; gap: 10px; margin-top: 18px; }
.cc-below:empty { display: none; }
.cc-w.is-tile { min-height: 0; justify-content: flex-start; gap: 8px; }
.cc-w.is-tile.has-img { min-height: 180px; justify-content: flex-end; }
.cc-w.is-tile > svg { top: 12px; bottom: auto; }

/* slots */
.cc-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.cc-slot { display: grid; text-align: center; padding: 8px 0; border-radius: 12px; background: var(--sand); font-size: 12px; color: var(--soft); }
.cc-slot b { font: 600 14px/1.3 inherit; font-family: inherit; color: var(--ink); }
.cc-slot.is-empty { opacity: .5; }

/* GitHub */
/* square cells, Sunday on top, the latest week on the right: GitHub's own layout */
.cc-gh { display: grid; grid-template-rows: repeat(7, auto); grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; }
.cc-w.is-tile .cc-gh { gap: 1.5px; }
.cc-gh i { aspect-ratio: 1; border-radius: 2px; background: #ECE9DF; min-width: 0; }
.cc-w.is-tile .cc-gh i { border-radius: 1.5px; }
.cc-gh i[data-l="x"] { visibility: hidden; }
.cc-gh i[data-l="1"] { background: #C3DCC6; } .cc-gh i[data-l="2"] { background: #7FBF8F; }
.cc-gh i[data-l="3"] { background: #2F9E5B; } .cc-gh i[data-l="4"] { background: #1F6B3D; }

/* links */
.cc-links { display: flex; flex-wrap: wrap; gap: 6px; }
.cc-links a { padding: 7px 12px; border-radius: 99px; background: var(--sand); font-size: 13px; }

/* swap contacts */
.cc-swap { display: grid; gap: 8px; }
.cc-swap input { width: 100%; height: 42px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--sand); font: inherit; font-size: 16px; color: var(--ink); }
.cc-swap input:focus { outline: none; border-color: var(--forest-2); background: #fff; }
.cc-swap button { height: 44px; border: 0; border-radius: 12px; background: var(--forest); color: #fff; font: 600 15px/1 inherit; font-family: inherit; cursor: pointer; }
.cc-swap button:disabled { opacity: .6; }
.cc-hp { position: absolute !important; left: -9999px; width: 1px !important; height: 1px !important; opacity: 0; }
.cc-fine { font-size: 11.5px !important; color: var(--muted) !important; } .cc-fine a { text-decoration: underline !important; }
.cc-done { font-size: 14px !important; color: var(--forest-2) !important; }
.cc-swap.is-sent > :not(.cc-done) { display: none; }

/* footer */
.cc-foot { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 26px; font-size: 11px; color: #9AA096; }
.cc-foot img { display: block; }
.cc-brand { display: inline-flex; align-items: center; gap: 7px; font: 400 17px/1 'Exposure', Georgia, serif; color: var(--ink); }

.cc-wallet { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 12px; background: #000; color: #fff !important; font-size: 14px; font-weight: 500; }

/* the gone, 404 and team pages */
.cc-note { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.cc-note h1 { font: 400 32px/1.1 'Exposure', Georgia, serif; }
.cc-note p { color: var(--muted); }
.cc-note .cc-book { margin: 8px 0 0; }
.cc-ghost { text-align: center; padding: 12px; color: var(--forest-2) !important; }
.cc-team header { display: grid; gap: 16px; margin: 12px 0 22px; }
.cc-team h1 { font: 400 40px/1 'Exposure', Georgia, serif; }
.cc-team ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cc-team li a { display: grid; grid-template-columns: 58px 1fr; column-gap: 12px; align-items: center; padding: 10px; border-radius: 18px; background: var(--paper); border: 1px solid var(--line); }
.cc-team li .cc-photo { grid-row: span 2; }
.cc-team li b { font: 400 22px/1.1 'Exposure', Georgia, serif; align-self: end; }
.cc-team li span:last-child { font-size: 13px; color: var(--muted); align-self: start; }

@media (prefers-reduced-motion: reduce) { .cc * { transition: none !important; } }