/* Bonded Daily — a real notebook on a desk.
   Left page: today's Bonded. Right page: the devotional.
   Phone first: the pages stack. Wide screens get the open spread with the spiral between. */

:root{
  --wood-1:#6B4A2F;
  --wood-2:#57381F;
  --wood-3:#7A5637;
  --cover:#16161A;
  --cover-2:#26262C;
  --paper:#FAF8F2;
  --paper-2:#F2EFE6;
  --ink:#1B1B19;
  --ink-2:#5F5F58;
  --rule:#BDD1E4;
  --yellow:#F8E37A;
  --blue:#B9D2EE;
  --coil-1:#2A2A2E;
  --coil-2:#8A8A92;
  --hand:"Patrick Hand",ui-rounded,system-ui,sans-serif;
  --marker:"Permanent Marker",Impact,sans-serif;
  --line-h:32px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --wood-1:#3A2717; --wood-2:#2A1B0F; --wood-3:#45301D;
    --paper:#EFEDE4; --paper-2:#E5E2D6; --ink:#1B1B19; --ink-2:#5F5F58;
  }
}
:root[data-theme="dark"]{
  --wood-1:#3A2717; --wood-2:#2A1B0F; --wood-3:#45301D;
  --paper:#EFEDE4; --paper-2:#E5E2D6; --ink:#1B1B19; --ink-2:#5F5F58;
}

*{box-sizing:border-box}
html{background:var(--wood-2);-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100vh;color:#F3E8DA;font:400 18px/1.55 var(--hand);
  background:
    repeating-linear-gradient(92deg, rgba(0,0,0,.14) 0 2px, transparent 2px 7px, rgba(255,255,255,.04) 7px 9px, transparent 9px 26px),
    repeating-linear-gradient(88deg, rgba(0,0,0,.10) 0 3px, transparent 3px 40px),
    linear-gradient(160deg, var(--wood-3), var(--wood-1) 45%, var(--wood-2));
  background-attachment:fixed;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2.5px solid #F8E37A;outline-offset:3px;border-radius:6px}
img,video,iframe{display:block;max-width:100%}
[hidden]{display:none!important}

/* desk chrome */
.desk-top{max-width:1180px;margin:0 auto;padding:16px 18px 12px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font:400 20px/1 var(--marker);color:#F6EEE2;text-shadow:0 2px 6px rgba(0,0,0,.5)}
.brand-mark{width:20px;height:20px;border-radius:50%;border:4px solid #F6EEE2;flex:none}
.join{
  display:inline-flex;align-items:center;min-height:42px;padding:0 20px;border-radius:8px;text-decoration:none;
  background:#16161A;color:#F6EEE2;border:2px solid rgba(246,238,226,.35);font:400 16px/1 var(--hand);letter-spacing:.04em
}
.banner-wrap{max-width:1180px;margin:0 auto;padding:0 18px 10px}
.banner-wrap p{
  margin:0;padding:12px 16px;background:#FFF6C9;color:#1B1B19;border-radius:4px;font-size:17px;
  box-shadow:0 10px 24px -16px rgba(0,0,0,.9);transform:rotate(-.4deg)
}
.banner-wrap b{font-family:var(--marker);font-weight:400;font-size:16px}

/* the notebook */
.notebook{max-width:1180px;margin:0 auto;padding:4px 14px 34px;perspective:1600px}
.spread{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr);
  background:linear-gradient(160deg,var(--cover-2),var(--cover));
  padding:12px;border-radius:14px;
  box-shadow:0 40px 60px -30px rgba(0,0,0,.85), 0 8px 20px -10px rgba(0,0,0,.6);
}
.page{
  position:relative;color:var(--ink);background:var(--paper);
  background-image:repeating-linear-gradient(180deg,transparent 0 calc(var(--line-h) - 1px),var(--rule) calc(var(--line-h) - 1px) var(--line-h));
  background-position:0 126px;background-attachment:local;
  padding:22px 18px 30px;border-radius:3px;
  box-shadow:0 2px 0 rgba(0,0,0,.25), 0 14px 24px -18px rgba(0,0,0,.8);
}
.page > *{position:relative}
.page.left{border-radius:4px 2px 2px 4px}
.page.right{border-radius:2px 4px 4px 2px}
/* punched holes along the binding edge */
.page.left::after,.page.right::after{
  content:"";position:absolute;pointer-events:none;
  background-image:radial-gradient(circle at 50% 50%, rgba(0,0,0,.42) 0 46%, transparent 48%);
}
.page.left::after{left:0;right:0;bottom:-2px;height:14px;background-size:44px 14px;background-repeat:repeat-x}
.page.right::after{left:0;right:0;top:-2px;height:14px;background-size:44px 14px;background-repeat:repeat-x}

/* spiral */
.spiral{
  position:relative;height:40px;margin:2px 0;
  background:
    repeating-linear-gradient(90deg,
      transparent 0 12px,
      var(--coil-1) 12px 15px,
      var(--coil-2) 15px 17px,
      var(--coil-1) 17px 20px,
      transparent 20px 44px);
  filter:drop-shadow(0 3px 3px rgba(0,0,0,.55));
}
.spiral::before{
  content:"";position:absolute;left:0;right:0;top:50%;height:3px;transform:translateY(-50%);
  background:rgba(0,0,0,.35)
}
@media (min-width:980px){
  .spread{grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr);padding:16px}
  .page{padding:30px 34px 40px}
  .page.left{box-shadow:inset -22px 0 26px -24px rgba(0,0,0,.85), 0 14px 24px -18px rgba(0,0,0,.8)}
  .page.right{box-shadow:inset 22px 0 26px -24px rgba(0,0,0,.85), 0 14px 24px -18px rgba(0,0,0,.8)}
  .page.left::after{left:auto;right:-2px;top:0;bottom:0;width:14px;height:auto;background-size:14px 44px;background-repeat:repeat-y}
  .page.right::after{right:auto;left:-2px;top:0;bottom:0;width:14px;height:auto;background-size:14px 44px;background-repeat:repeat-y}
  .spiral{
    height:auto;margin:0;
    background:
      repeating-linear-gradient(180deg,
        transparent 0 12px,
        var(--coil-1) 12px 15px,
        var(--coil-2) 15px 17px,
        var(--coil-1) 17px 20px,
        transparent 20px 44px);
  }
  .spiral::before{left:50%;right:auto;top:0;bottom:0;height:auto;width:3px;transform:translateX(-50%)}
}

/* page headers */
.page-head{display:grid;grid-template-columns:auto auto;justify-content:space-between;align-items:start;gap:8px 10px;margin-bottom:16px}
.page-head .page-title{grid-column:1 / -1;order:3;justify-self:center;margin-top:2px}
@media (min-width:600px){
  .page-head{grid-template-columns:auto 1fr auto;justify-content:stretch}
  .page-head .page-title{grid-column:2;order:0;margin-top:0}
}
.datestack{margin:0;font:400 15px/1.15 var(--hand);letter-spacing:.1em;text-transform:uppercase;white-space:pre-line;color:var(--ink)}
.datestack.right{text-align:right;justify-self:end}
@media (min-width:600px){.datestack.right{grid-column:3}}
.page-title{margin:0;justify-self:center;font:400 clamp(21px,4.6vw,28px)/1.1 var(--hand);letter-spacing:.14em;text-transform:uppercase;padding:0 8px 2px}
.hl-yellow{background:linear-gradient(180deg,transparent 56%,var(--yellow) 56%,var(--yellow) 97%,transparent 97%)}
.hl-blue{background:linear-gradient(180deg,transparent 56%,var(--blue) 56%,var(--blue) 97%,transparent 97%)}
.stampwrap{margin:0;justify-self:end}
@media (min-width:600px){.stampwrap{grid-column:3}}
.stamp{
  display:inline-block;font:400 14px/1 var(--hand);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);
  border:2px solid var(--ink);border-radius:4px;padding:7px 10px;transform:rotate(-2.5deg)
}
.late .stamp,.lastcall .stamp{background:var(--yellow)}

/* left page */
.clockblock{text-align:center;margin:8px 0 18px}
.clock-label{margin:0;font-size:16px;color:var(--ink-2)}
.clock{margin:2px 0;font:400 clamp(44px,12vw,62px)/1.1 var(--marker);font-variant-numeric:tabular-nums;color:var(--ink)}
.clock-sub{margin:0;font-size:15.5px;color:var(--ink-2)}
.print{
  margin:0 auto 16px;padding:8px 8px 10px;background:#fff;max-width:430px;transform:rotate(-.8deg);
  box-shadow:0 14px 22px -18px rgba(0,0,0,.9), 0 1px 0 rgba(0,0,0,.12)
}
.frame{position:relative;width:100%;background:#fff;color:var(--ink);overflow:hidden;min-height:60px;max-height:74vh}
.frame.ratio{aspect-ratio:4/5}
.frame > iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.frame > img,.frame > video{width:100%;height:auto;display:block;max-height:74vh;object-fit:contain}
.frame.ratio > img,.frame.ratio > video{position:absolute;inset:0;height:100%;object-fit:contain;background:#fff}
.placeholder{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:44px 24px;min-height:220px}
.ph-small{margin:0 0 8px;font:400 14px/1 var(--hand);letter-spacing:.26em}
.ph-big{margin:0;font:400 clamp(22px,5.5vw,28px)/1.15 var(--marker)}
.handline{margin:0;text-align:center;font:400 19px/1.4 var(--hand);color:var(--ink-2)}
.handline.big{margin:2px 0 18px;font:400 clamp(28px,7vw,38px)/1.15 var(--marker);color:var(--ink)}
.actions{display:grid;gap:10px;margin-bottom:16px}
@media (min-width:520px){.actions{grid-template-columns:auto auto;justify-content:center}}
.btn{min-height:52px;padding:0 24px;border-radius:6px;font:400 17px/1 var(--hand);letter-spacing:.04em;background:transparent;color:var(--ink)}
.btn.solid{border:2.5px solid var(--ink);background:var(--yellow)}
.btn.line{border:2px dashed var(--ink-2)}
.btn:active{transform:translateY(1px)}
.song{display:flex;align-items:center;gap:12px;text-decoration:none;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:10px 2px;margin-bottom:12px}
.song-side{font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);flex:none}
.song-text{flex:1;min-width:0;line-height:1.25}
.song-text b{display:block;font:400 19px/1.2 var(--hand);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.song-text span{font-size:15px;color:var(--ink-2)}
.song-go{font-size:15px;color:var(--ink);border-bottom:2px solid var(--yellow);flex:none}
.credits{margin:0;display:grid;grid-template-columns:auto 1fr;gap:2px 14px;font-size:16px}
.credits dt{color:var(--ink-2)}
.credits dd{margin:0}

/* torn-out state */
.torn{text-align:center;padding:20px 8px 26px}
.torn::before{
  content:"";display:block;height:22px;margin:0 -10px 20px;
  background:
    linear-gradient(-48deg,var(--paper) 11px,transparent 0) 0 0/22px 22px repeat-x,
    linear-gradient(48deg,var(--paper) 11px,transparent 0) 0 0/22px 22px repeat-x,
    rgba(0,0,0,.10);
}
.torn-note{margin:0 0 6px;font:400 clamp(22px,5.5vw,27px)/1.2 var(--marker)}
.torn-sub{margin:0 0 16px;font-size:17px;color:var(--ink-2)}
.page-foot{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:20px}
.doodle{width:104px;height:34px;fill:none;stroke:var(--ink);stroke-width:2.5;stroke-linejoin:round}
.tag{margin:0;font:400 15px/1 var(--hand);letter-spacing:.16em}
.pagenum{position:absolute;left:0;right:0;bottom:10px;margin:0;text-align:center;font-size:15px;color:var(--ink-2)}

/* right page */
.dev-nav{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:14px}
.navbtn{background:transparent;border:2px dashed var(--ink-2);border-radius:6px;min-height:44px;padding:0 14px;font:400 16px/1 var(--hand);color:var(--ink)}
.navbtn[disabled]{opacity:.3;cursor:default}
.dev-count{font-size:15px;color:var(--ink-2);text-align:center}
.dev-title{margin:0 0 12px;font:400 clamp(26px,6vw,34px)/1.15 var(--hand);font-weight:700;text-align:center;color:var(--ink)}
.verse{margin:0 0 16px;padding:0}
.verse-text{
  margin:0;font-size:18px;line-height:1.5;text-align:center;color:var(--ink);
  background:linear-gradient(180deg,transparent 10%,var(--blue) 10%,var(--blue) 94%,transparent 94%);
  box-decoration-break:clone;-webkit-box-decoration-break:clone;padding:0 3px
}
.verse-ref{display:block;margin-top:8px;text-align:center;font-size:14.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);font-style:normal}
.section-label{display:inline-block;margin:0 0 6px;font:400 18px/1.2 var(--hand);letter-spacing:.08em;padding:0 5px;color:var(--ink)}
.dev-body p{margin:0 0 12px;font-size:18px;line-height:1.55;color:var(--ink)}
.prompts{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:9px}
.prompts li{display:flex;gap:12px;align-items:flex-start}
.prompts input{
  appearance:none;-webkit-appearance:none;width:21px;height:21px;flex:none;margin-top:3px;
  border:2px solid var(--ink);border-radius:2px;background:transparent;display:grid;place-items:center
}
.prompts input:checked::after{content:"\2713";font:400 18px/1 var(--hand);color:var(--ink)}
.prompts label{font-size:17.5px;line-height:1.45;color:var(--ink)}
.circle-note{
  margin:22px 0 0;margin-left:auto;width:max-content;text-align:center;font-size:14.5px;line-height:1.25;
  letter-spacing:.04em;border:2px solid var(--ink);border-radius:50%/50%;padding:14px 20px;transform:rotate(-4deg);color:var(--ink)
}

/* desk footer */
.desk-foot{max-width:1180px;margin:0 auto;padding:14px 18px calc(30px + env(safe-area-inset-bottom));text-align:center;color:#EADFCE}
.footnav{display:flex;gap:4px;flex-wrap:wrap;justify-content:center;margin-bottom:4px}
.footnav a,.social a{text-decoration:none;font-size:16px;letter-spacing:.06em;padding:10px 12px;color:#EADFCE;opacity:.85}
.footnav a[aria-current="page"]{opacity:1;border-bottom:2px solid var(--yellow)}
.social{display:flex;gap:4px;flex-wrap:wrap;justify-content:center}

/* slides inside the print */
.track{position:absolute;inset:0;display:flex;transition:transform .38s ease;touch-action:pan-y}
.track img{flex:0 0 100%;width:100%;height:100%;object-fit:contain;background:#fff;user-select:none;-webkit-user-drag:none}
.snav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:42px;height:42px;border-radius:50%;border:0;background:rgba(255,255,255,.94);color:#1B1B19;display:grid;place-items:center;box-shadow:0 2px 8px rgba(0,0,0,.3)}
.snav svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2.4}
.snav.prev{left:10px}.snav.next{right:10px}
.snav:disabled{opacity:0;pointer-events:none}
.dots{position:absolute;left:12px;right:12px;bottom:12px;display:flex;gap:4px;z-index:3}
.dots span{flex:1;height:3px;background:#fff;opacity:.4;transition:opacity .25s}
.dots span.on{opacity:1}
.count{position:absolute;top:12px;right:12px;z-index:3;background:rgba(20,20,18,.75);color:#fff;font-size:14px;padding:5px 9px;border-radius:3px}

/* toast */
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translate(-50%,16px);background:#16161A;color:#F6EEE2;border-radius:6px;padding:13px 20px;font-size:16px;opacity:0;pointer-events:none;transition:.25s;z-index:50;max-width:calc(100% - 32px);text-align:center;box-shadow:0 16px 30px -18px rgba(0,0,0,.9)}
.toast.show{opacity:1;transform:translate(-50%,0)}

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