/* ---------------------------------------------------------------
   Sophia demo — a carbon-copy message slip on a dark desk.
   Printed labels: Bricolage Grotesque. Written-in: Caveat. Prose: Karla.
   --------------------------------------------------------------- */

@font-face{font-family:"Bricolage";src:url("/fonts/bricolage.woff2") format("woff2");
  font-weight:400 800;font-display:swap;font-style:normal}
@font-face{font-family:"Karla";src:url("/fonts/karla.woff2") format("woff2");
  font-weight:200 800;font-display:swap;font-style:normal}
@font-face{font-family:"Caveat";src:url("/fonts/caveat.woff2") format("woff2");
  font-weight:400 700;font-display:swap;font-style:normal}

:root{
  --desk:#1B2130;          /* the desk in low light */
  --desk-lift:#252D3F;
  --slip:#F0BFAE;          /* carbonless copy pink */
  --slip-deep:#E3A896;
  --rule:#B9705C;          /* pre-printed rule on the pad */
  --label:#7A4436;         /* pre-printed label ink */
  --ink:#17325C;           /* ballpoint blue */
  --live:#37B27E;          /* on the line */
  --paper-glow:rgba(240,191,174,.13);
  --sans:"Karla",ui-sans-serif,system-ui,sans-serif;
  --print:"Bricolage","Karla",sans-serif;
  --hand:"Caveat",ui-rounded,cursive;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  min-height:100svh;
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  color:#E7E2DC;
  background-color:var(--desk);
  background-image:
    radial-gradient(120% 80% at 50% -10%, var(--paper-glow) 0%, transparent 60%),
    radial-gradient(90% 60% at 50% 115%, rgba(23,50,92,.28) 0%, transparent 65%);
  background-attachment:fixed;
}

/* ---------- layout ---------- */
.desk{
  width:100%;
  max-width:640px;
  margin-inline:auto;
  padding:clamp(28px,7vw,64px) clamp(16px,5vw,32px) 64px;
}

.eyebrow{
  margin:0 0 clamp(20px,4vw,30px);
  font-family:var(--print);
  font-weight:700;
  font-size:12px;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:#9AA6BE;
  text-align:center;
}

/* ---------- the slip ---------- */
.slip{
  position:relative;
  background:var(--slip);
  color:var(--ink);
  border-radius:3px;
  padding:clamp(22px,5vw,34px) clamp(20px,5vw,36px) clamp(24px,5vw,32px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.35) inset,
    0 18px 40px -12px rgba(0,0,0,.6),
    0 2px 6px rgba(0,0,0,.35);
  /* torn top edge, drawn not decorated: this pad has been used before */
  background-image:repeating-linear-gradient(
    90deg, transparent 0 9px, rgba(0,0,0,.045) 9px 10px);
}
.slip::before{
  content:"";
  position:absolute;inset:0;
  border-radius:3px;
  background:linear-gradient(160deg, rgba(255,255,255,.28), transparent 42%);
  pointer-events:none;
}

.slip__head{
  display:flex;align-items:baseline;gap:14px;
  padding-bottom:12px;
  border-bottom:2px solid var(--rule);
  margin-bottom:6px;
}
.slip__title{
  margin:0;
  font-family:var(--print);
  font-weight:700;
  font-size:clamp(21px,5.2vw,28px);
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--label);
  line-height:1.05;
}
.slip__tear{flex:1;height:1px;background:repeating-linear-gradient(90deg,var(--rule) 0 3px,transparent 3px 7px);opacity:.65}

/* pre-printed field rows */
.slip__fields{margin:0;padding:0}
.field{
  display:grid;
  grid-template-columns:clamp(48px,14vw,62px) 1fr;
  align-items:baseline;
  gap:10px;
  padding:9px 0 5px;
  border-bottom:1px solid var(--rule);
}
.field dt{
  font-family:var(--print);
  font-weight:700;font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--label);
}
.field dd{margin:0}

.hand{
  font-family:var(--hand);
  font-weight:600;
  font-size:clamp(22px,5.4vw,26px);
  line-height:1.25;
  color:var(--ink);
  transform:rotate(-.5deg);
  transform-origin:left center;
}
.hand--msg{
  display:block;
  margin:2px 0 0;
  font-size:clamp(21px,5vw,25px);
  transform:rotate(-.35deg);
}

/* checkbox row */
.slip__checks{
  display:flex;flex-wrap:wrap;gap:8px 20px;
  margin:14px 0 4px;padding:0;list-style:none;
  font-family:var(--print);
  font-weight:700;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--label);
}
.slip__checks li{display:flex;align-items:center;gap:8px}
.box{
  width:13px;height:13px;flex:none;
  border:1.5px solid var(--label);
  position:relative;
}
/* a ticked box: pen stroke sits in the box, riding a touch proud of it */
.box--ticked::after{
  content:"";position:absolute;left:3.5px;top:-1.5px;
  width:5px;height:10px;
  border-right:2.5px solid var(--ink);
  border-bottom:2.5px solid var(--ink);
  transform:rotate(40deg);
}

.slip__message{padding-top:12px;border-top:1px solid var(--rule);margin-top:10px}
.msg-label{
  font-family:var(--print);
  font-weight:700;font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--label);
}
.slip__note{
  margin:16px 0 0;
  font-size:12.5px;
  line-height:1.45;
  color:#764539;
}

/* ---------- the call action, sitting on the slip ---------- */
.slip__action{
  margin-top:20px;
  padding-top:20px;
  border-top:2px solid var(--rule);
}
.call{
  display:flex;align-items:center;justify-content:center;gap:12px;
  width:100%;min-height:60px;
  padding:16px 24px;
  border:none;border-radius:2px;
  background:var(--ink);
  color:#F4E7E1;
  font-family:var(--print);
  font-weight:700;font-size:16px;letter-spacing:.11em;text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  transition:background .18s ease, transform .12s ease, box-shadow .18s ease;
  box-shadow:0 3px 0 #0D1F3C;
}
.call:hover{background:#1F4079}
.call:active{transform:translateY(2px);box-shadow:0 1px 0 #0D1F3C}
.call:focus-visible{outline:3px solid #0D1F3C;outline-offset:3px}
.call[disabled]{cursor:not-allowed;opacity:.62;box-shadow:0 3px 0 #0D1F3C}

.call__dot{
  width:11px;height:11px;flex:none;border-radius:50%;
  background:#F4E7E1;opacity:.85;
}
/* dialing: the dot breathes. live: it goes green and steady-pulses. */
.call.is-dialing .call__dot{animation:breathe 1.15s ease-in-out infinite}
.call.is-live{background:#12502F;box-shadow:0 3px 0 #0A3520}
.call.is-live:hover{background:#17603A}
.call.is-live .call__dot{background:var(--live);animation:pulse 1.6s ease-out infinite}

@keyframes breathe{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(55,178,126,.7)}
  70%{box-shadow:0 0 0 9px rgba(55,178,126,0)}
  100%{box-shadow:0 0 0 0 rgba(55,178,126,0)}
}

.status{
  margin:12px 2px 0;
  font-size:13.5px;
  line-height:1.45;
  color:#764539;
  min-height:2.9em;
}
.status.is-error{color:#8C2B1E;font-weight:500}

/* ---------- supporting copy on the desk ---------- */
.brief{margin-top:clamp(30px,6vw,44px)}
.brief__lede{
  margin:0 0 20px;
  font-size:clamp(17px,3.6vw,19px);
  line-height:1.55;
  color:#D5DBE7;
}
.brief__list{margin:0;padding:0;list-style:none;display:grid;gap:13px}
.brief__list li{
  padding-left:18px;position:relative;
  font-size:16px;line-height:1.6;color:#A9B3C7;
}
.brief__list li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:7px;height:1.5px;background:var(--slip-deep);
}
.brief__list b{color:#E7E2DC;font-weight:700}

.foot{
  margin-top:clamp(34px,7vw,52px);
  padding-top:22px;
  border-top:1px solid rgba(240,191,174,.2);
  font-size:13px;line-height:1.6;color:#8590A6;
}
.foot p{margin:0 0 12px}
.foot p:last-child{margin-bottom:0}
.foot b{color:#B9C3D6;font-weight:700}
.foot a{color:var(--slip-deep);text-decoration:underline;text-underline-offset:2px}
.foot a:hover{color:var(--slip)}
.foot a:focus-visible{outline:2px solid var(--slip);outline-offset:2px;border-radius:2px}

/* ---------- page-load: the slip gets written in ---------- */
[data-reveal]{
  opacity:0;
  animation:write .5s cubic-bezier(.2,.7,.3,1) forwards;
}
[data-reveal="1"]{animation-delay:.30s}
[data-reveal="2"]{animation-delay:.55s}
[data-reveal="3"]{animation-delay:.80s}
[data-reveal="4"]{animation-delay:1.02s}
[data-reveal="5"]{animation-delay:1.22s}
@keyframes write{
  from{opacity:0;transform:translateY(4px) rotate(-1.4deg)}
  to{opacity:1}
}

@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;animation:none}
  .call.is-dialing .call__dot,
  .call.is-live .call__dot{animation:none}
  *{transition-duration:.01ms !important}
}

@media (max-width:420px){
  .slip__checks{font-size:11px;gap:7px 14px}
  .call{font-size:14.5px;letter-spacing:.08em}
}