/* SMART TEMPLE · the page behind the card
   One screen per person. Sits on main.css for tokens and the plate; everything
   else here. Mobile first: the phone that scanned the card is the first reader. */
body.cardpage{background:var(--limestone);min-height:100vh;min-height:100dvh}
.cp{max-width:1120px;margin:0 auto;padding:0 0 40px}
.cp-top{display:flex;justify-content:space-between;align-items:center;padding:18px clamp(18px,4vw,32px);gap:16px}
.cp-lockup{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.cp-lockup .lk-txt{display:flex;flex-direction:column;line-height:1}
.cp-lockup .lk-a{font-family:var(--serif);font-size:13px;letter-spacing:.06em;color:var(--bronze-deep)}
.cp-lockup .lk-t{font-family:var(--serif);font-size:15px;letter-spacing:.2em;margin-top:2px}
.cp-addr{font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--umber);text-decoration:none;text-transform:lowercase}
.cp-addr:hover{color:var(--bronze-deep)}

.cp-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.cp-grid>*,.cp-tiles>*,.cp-row>*,.cp-tile .plate-img{min-width:0;max-width:100%}
.cp-tile .plate-img img{width:100%}
/* the ink card */
.cp-ink{background:var(--ink);color:var(--limestone);padding:clamp(30px,6vw,52px) clamp(22px,5vw,44px) clamp(28px,5vw,40px);display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;overflow:hidden}
.cp-ink::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(176,133,74,.16),transparent 62%);pointer-events:none}
.cp-seal{width:clamp(176px,48vw,224px);position:relative}
.cp-seal .seal{width:100%;height:auto;display:block}
.cp-nm{font-family:var(--serif);font-weight:400;font-size:clamp(27px,7vw,34px);letter-spacing:.02em;line-height:1.12;margin-top:24px;text-wrap:balance}
.cp-rl{font-family:var(--mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--bronze-hi);margin-top:12px}
.cp-cred{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(234,228,215,.55);margin-top:10px;line-height:1.9}
.cp-save{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:100%;margin-top:28px;padding:18px 20px 15px;background:linear-gradient(160deg,var(--bronze-hi),var(--bronze-deep));color:var(--ink);text-decoration:none;font-family:var(--mono);font-size:12px;letter-spacing:.3em;text-transform:uppercase;font-weight:500;transition:background .35s,color .35s}
.cp-save small{font-family:var(--sans);font-size:11.5px;letter-spacing:0;text-transform:none;font-weight:400;color:rgba(24,21,16,.72)}
.cp-save:hover{background:var(--limestone)}
.cp-row{display:grid;gap:6px;width:100%;margin-top:8px}
.cp-row.n2{grid-template-columns:1fr 1fr}
.cp-row.n3{grid-template-columns:1fr 1fr 1fr}
.cp-act{display:flex;align-items:center;justify-content:center;padding:14px 6px;border:1px solid rgba(234,228,215,.22);color:var(--limestone);text-decoration:none;font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;transition:border-color .3s,color .3s,background .3s}
.cp-act:hover{border-color:var(--bronze-hi);color:var(--bronze-hi)}
.cp-reach{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:rgba(234,228,215,.42);margin-top:14px}
.cp-desk{display:none}

/* the body */
.cp-body{padding:clamp(28px,6vw,44px) clamp(22px,5vw,44px) 0}
.cp-bio{font-family:var(--serif);font-size:clamp(19px,4.8vw,24px);line-height:1.4;letter-spacing:.01em;color:var(--ink);text-wrap:pretty}
.cp-verify{display:flex;justify-content:space-between;gap:12px;align-items:baseline;margin-top:22px;padding:14px 16px;border:1px solid var(--bronze);background:var(--paper);font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--umber)}
.cp-verify .k{color:var(--bronze-deep);font-weight:500}
.cp-h{font-family:var(--mono);font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--bronze-deep);display:flex;align-items:center;gap:16px;margin-top:clamp(30px,6vw,44px);margin-bottom:16px}
.cp-h::after{content:"";flex:1;height:1px;background:var(--hairline)}
.cp-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cp-tile{position:relative;text-decoration:none;color:var(--limestone);border:1px solid var(--hairline);display:block;overflow:hidden;background:var(--ink)}
.cp-tile .plate-img{aspect-ratio:.86}
.cp-tile .plate-img img{filter:saturate(.5) contrast(1.02) brightness(.72)}
.cp-tile .t{position:absolute;left:0;right:0;bottom:0;z-index:5;padding:38px 12px 12px;background:linear-gradient(transparent,rgba(24,21,16,.9));display:flex;flex-direction:column;gap:3px}
.cp-tile .mk{width:22px;height:22px;color:var(--bronze-hi);margin-bottom:6px}
.cp-tile .mk svg{width:100%;height:100%;display:block}
.cp-tile b{font-family:var(--serif);font-weight:400;font-size:15px;letter-spacing:.02em;line-height:1.15}
.cp-tile small{font-family:var(--mono);font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:rgba(234,228,215,.65);line-height:1.5}
.cp-tile:hover .plate-img img{transform:scale(1.05)}
.cp-office .ad{font-size:14px;font-weight:300;line-height:1.75;color:var(--umber)}
.cp-office .cp-row{margin-top:14px}
.cp-office .cp-act{color:var(--ink);border-color:var(--hairline)}
.cp-office .cp-act:hover{border-color:var(--bronze);color:var(--bronze-deep)}
.cp-send{display:flex;flex-direction:column;align-items:center;gap:5px;width:100%;margin-top:clamp(30px,6vw,44px);padding:17px 16px 14px;background:var(--ink);color:var(--limestone);border:0;cursor:pointer;font-family:var(--mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;transition:background .35s}
.cp-send small{font-family:var(--sans);font-size:11.5px;letter-spacing:0;text-transform:none;color:rgba(234,228,215,.6)}
.cp-send:hover{background:var(--bronze-deep)}
.cp-line{font-family:var(--serif);font-size:clamp(22px,5.6vw,28px);letter-spacing:.03em;text-align:center;margin-top:clamp(40px,9vw,64px);color:var(--ink)}
.cp-line .b{color:var(--bronze)}
.cp-end{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:28px;font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--umber)}
.cp-end a{color:var(--bronze-deep);text-decoration:none}

/* the desk: two columns, the card stays put, the code appears */
@media(min-width:900px){
  .cp{padding:0 clamp(24px,4vw,56px) 64px}
  .cp-top{padding:26px 0 22px}
  .cp-grid{grid-template-columns:420px minmax(0,1fr);gap:clamp(36px,5vw,72px);align-items:start}
  .cp-ink{position:sticky;top:28px;padding:44px 36px 36px}
  .cp-body{padding:8px 0 0;max-width:560px}
  .cp-desk{display:grid;grid-template-columns:104px 1fr;gap:16px;align-items:center;width:100%;margin-top:26px;padding-top:24px;border-top:1px solid rgba(234,228,215,.14);text-align:left}
  .cp-qr{width:104px;height:104px;display:block;background:var(--paper);padding:6px}
  .cp-desk-t{font-size:12.5px;font-weight:300;line-height:1.6;color:rgba(234,228,215,.6)}
  .cp-desk-t b{display:block;font-family:var(--mono);font-weight:500;font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--bronze-hi);margin-bottom:6px}
  .cp-tiles{grid-template-columns:1fr 1fr}
  .cp-tile .plate-img{aspect-ratio:1}
}
@media print{.cp-save,.cp-send,.cp-row,.cp-desk{display:none}}