/* La pulsera: the device's theme on the web. Black ink on white, a
   friendship bracelet of letter beads opening every section, soft
   Fraunces titles, Bricolage body, one dry line in italic. The hearts
   are the only colour; the device has none. */
@font-face{font-family:Fraunces;src:url('/static/Fraunces.ttf') format('truetype');font-style:normal;font-weight:100 900;font-display:swap}
@font-face{font-family:Fraunces;src:url('/static/Fraunces-Italic.ttf') format('truetype');font-style:italic;font-weight:100 900;font-display:swap}
@font-face{font-family:Bricolage;src:url('/static/Bricolage.ttf') format('truetype');font-style:normal;font-weight:200 800;font-display:swap}

:root{
  --ink:#111;
  --paper:#fff;
  --heart:#ff4f8b;
  --heart-ink:#d81b60;
  --sans:'Bricolage','Helvetica Neue',Arial,sans-serif;
  --serif:'Fraunces',Georgia,serif;
  --gutter:max(20px,calc((100vw - 1040px)/2));
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:500 16px/1.4 var(--sans);overflow-x:clip}   /* the threads run to the edges */
a{color:inherit}
button,input,textarea{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:900;font-variation-settings:'SOFT' 100,'WONK' 0;letter-spacing:-.02em;line-height:1}
em,.dry{font:italic 600 18px/1.3 var(--serif);font-variation-settings:'SOFT' 100,'WONK' 1}
.caps{font:800 12px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase}

/* ---- the bracelet: beads on a thread, the thread ends in a knot ---- */
.bracelet{position:relative;display:flex;align-items:center;gap:3px;height:26px;margin-left:calc(var(--gutter)*-1);padding-left:var(--gutter);width:max-content;max-width:100%}
.bracelet::before{content:'';position:absolute;left:0;right:-17px;top:12px;height:2px;background:var(--ink);z-index:0}
.bracelet::after{content:'';position:absolute;right:-21px;top:9px;width:8px;height:8px;border-radius:50%;background:var(--ink)}
.bracelet>*{position:relative;z-index:1;flex:none}
.bracelet i{width:26px;height:26px;border-radius:50%;background:var(--paper);border:2px solid var(--ink);display:grid;place-items:center;font:800 15px var(--sans);font-style:normal;color:var(--ink)}
.bracelet i:nth-of-type(odd){border-radius:5px;background:var(--ink);color:#fff;border:0;font-size:16px}
.bracelet .dot{width:8px;height:8px;border-radius:50%;background:var(--ink)}
.bracelet svg{width:24px;height:24px;display:block}
.bracelet .heart{fill:var(--heart);stroke:var(--heart-ink);stroke-width:1.5}
.bracelet .star{fill:#fff;stroke:var(--ink);stroke-width:2.2;stroke-linejoin:round}
.bracelet .star.solid{fill:var(--ink)}
.bracelet.centered{margin:0 auto;padding:0;overflow:visible}
.bracelet.centered::before{left:-100vw;right:-100vw}
.bracelet.centered::after{display:none}

.rule{height:2px;background:var(--ink);border:0;margin:0}

/* ---- masthead: the clock's bracelet, the name, the dry line ---- */
.masthead{padding:34px var(--gutter) 0;text-align:center}
.masthead h1{margin:34px 0 0;font-size:clamp(44px,9vw,96px);text-wrap:balance}
.masthead .dry{display:block;margin:14px 0 0}
.masthead .caps{display:block;margin-top:22px;color:var(--heart-ink)}
.mast-foot{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:30px;padding:14px 0;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.mast-foot .caps{margin:0;color:var(--ink)}

main{padding:0 var(--gutter)}
section{margin-top:54px}
.section-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 14px;margin-top:18px}
.section-head h2{margin:0;font-size:clamp(38px,6vw,56px)}
.section-head h2 small{display:inline-block;margin-left:10px;font:900 .45em var(--serif);font-variation-settings:'SOFT' 100;letter-spacing:0;vertical-align:.22em}
.section-head .dry{display:block;margin-top:8px}
.actions{display:flex;align-items:center;gap:18px}

/* keycaps: the device's button hints become the buttons */
.key{display:inline-flex;align-items:center;gap:8px;border:2px solid var(--ink);border-radius:8px;background:var(--paper);padding:10px 16px;min-height:44px;cursor:pointer;text-decoration:none;white-space:nowrap;font:800 13px var(--sans);letter-spacing:.1em;text-transform:uppercase;transition:transform .1s,box-shadow .1s}
.key:hover{box-shadow:3px 3px 0 var(--ink);transform:translate(-1px,-1px)}
.key.primary{background:var(--ink);color:#fff}
.key.primary:hover{box-shadow:3px 3px 0 var(--heart)}
.key.quiet{border-color:transparent;padding-left:4px;padding-right:4px}
.key.quiet:hover{box-shadow:none;transform:none;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}

.notice{min-height:28px;padding:12px 0 0;font:600 14px var(--sans)}
.notice.is-error{margin-top:12px;padding:12px 14px;border:2px solid var(--ink);background:var(--heart);color:var(--ink)}
.notice.is-error::before{content:'!';display:inline-grid;place-items:center;width:22px;height:22px;margin-right:8px;border-radius:4px;background:var(--ink);color:#fff;font-weight:800;vertical-align:middle}

/* ---- photos: plain, on white, each under a thin rule ---- */
.photo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 14px;margin-top:22px}
.photo-card{min-width:0}
.photo-frame img{display:block;width:100%;aspect-ratio:4/3;object-fit:contain;background:#fff}
.photo-meta{display:flex;align-items:center;justify-content:space-between;border-top:2px solid var(--ink);padding:4px 0 0;margin-top:6px}
.photo-meta span{font:800 11px var(--sans);letter-spacing:.12em}
.delete-photo{border:0;background:none;cursor:pointer;width:36px;height:36px;padding:0;font-size:0}
.delete-photo::before{content:'×';font:600 24px/1 var(--sans);color:var(--ink)}
.delete-photo:hover::before{color:var(--heart-ink)}
.empty-gallery{grid-column:1/-1;padding:60px 20px;border:2px solid var(--ink);border-radius:18px;text-align:center}
.empty-gallery strong{display:block;font:900 30px var(--serif);font-variation-settings:'SOFT' 100;letter-spacing:-.02em}
.empty-gallery em{display:block;margin-top:10px}

/* ---- tasks: rings like the device's, a black bead with a tick when done ---- */
#todo-form{display:flex;align-items:center;gap:12px;max-width:640px;margin-top:22px;border-bottom:2px solid var(--ink)}
#todo-form input{flex:1;min-width:0;border:0;outline:0;background:transparent;padding:14px 0;font:600 18px var(--sans)}
#todo-form input::placeholder{color:#111a}
#todo-form button{border:2px solid var(--ink);border-radius:8px;background:none;width:40px;height:36px;font:800 20px/1 var(--sans);cursor:pointer}
#todo-form button:hover{background:var(--ink);color:#fff}
#todo-list{list-style:none;max-width:640px;margin:0;padding:0}
#todo-list li{display:flex;align-items:center;gap:14px;min-height:54px;padding:8px 0;border-bottom:2px solid var(--ink);font:600 18px var(--sans)}
#todo-list input{appearance:none;-webkit-appearance:none;flex:none;width:22px;height:22px;margin:0;border:2px solid var(--ink);border-radius:50%;cursor:pointer;background:#fff center/12px 10px no-repeat}
#todo-list input:checked{background-color:var(--ink);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1' fill='none' stroke='%23fff' stroke-width='2.4'/%3E%3C/svg%3E")}
#todo-list li.done span{text-decoration:line-through;text-decoration-thickness:2px;opacity:.55}
#todo-list button{margin-left:auto;border:0;background:none;font-size:24px;min-width:36px;min-height:36px;cursor:pointer}
#todo-list button:hover{color:var(--heart-ink)}

.guest-link{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-top:54px;padding:22px 0;border-top:2px solid var(--ink)}
.guest-link .dry{margin:0}
footer{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:70px;padding:0 var(--gutter) 30px}
footer .caps{margin:0;color:var(--ink)}
footer .bracelet{margin-left:calc(var(--gutter)*-1)}

/* ---- login: the setup screen ---- */
dialog{border:3px solid var(--ink);border-radius:18px;padding:0;width:min(420px,calc(100% - 40px));background:#fff;color:var(--ink);box-shadow:8px 8px 0 var(--heart)}
dialog::backdrop{background:#111d}
#login-form{position:relative;padding:28px 28px 30px}
#login-form .bracelet{margin-left:-31px;padding-left:28px}
#login-form h2{margin:22px 0 8px;font-size:34px}
#login-form p{margin:0 0 18px}
#login-form input{display:block;width:100%;margin-bottom:18px;padding:12px 0;border:0;border-bottom:2px solid var(--ink);border-radius:0;outline:0;background:#fff;font:600 18px var(--sans)}
#login-form input:focus{border-color:var(--heart-ink)}
.dialog-close{position:absolute;top:12px;right:16px;border:0;background:none;font-size:30px;line-height:1;cursor:pointer}
#login-error{display:block;margin-top:14px;font:600 14px var(--sans);color:var(--heart-ink)}

/* ---- the message board ---- */
.board-head{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:18px var(--gutter) 0}
.wordmark{font:900 26px var(--serif);font-variation-settings:'SOFT' 100;letter-spacing:-.02em;text-decoration:none}
.board-main{max-width:660px;margin:0 auto;padding:40px 20px 60px}
.board-main .bracelet{margin-left:-20px;padding-left:20px}
.board-main h1{margin:22px 0 10px;font-size:clamp(46px,10vw,72px)}
.board-intro{margin:0}
.board-main .dry{display:block;margin-top:10px}
.message-form,.unlock-form{margin-top:30px;padding-top:22px;border-top:2px solid var(--ink)}
.message-form label,.unlock-form label{display:block;margin-bottom:22px;font:800 12px var(--sans);letter-spacing:.14em;text-transform:uppercase}
.unlock-form .error{font:600 14px var(--sans);color:var(--heart-ink)}
.message-form input,.message-form textarea,.unlock-form input{display:block;width:100%;margin-top:4px;border:0;border-bottom:2px solid var(--ink);border-radius:0;outline:0;background:transparent;padding:10px 0 8px;font:600 18px var(--sans);letter-spacing:0;text-transform:none;resize:vertical}
.message-form input:focus,.message-form textarea:focus,.unlock-form input:focus{border-color:var(--heart-ink)}
.message-foot{display:flex;justify-content:space-between;align-items:center;gap:12px}
.message-foot span{font:600 14px var(--sans)}
.message-wall{margin-top:50px}
.message-wall h2{margin:0 0 6px;font-size:40px}
.message-card{padding:18px 0;border-bottom:2px solid var(--ink)}
.message-card p{margin:0 0 8px;font:700 22px/1.2 var(--serif);font-variation-settings:'SOFT' 100,'WONK' 0;overflow-wrap:anywhere}
.message-card span{font:800 12px var(--sans);letter-spacing:.14em;text-transform:uppercase}

@media(min-width:700px){
  .photo-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 22px}
}
@media(min-width:900px){
  .masthead{padding-top:50px}
  .photo-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:520px){
  .bracelet i{width:24px;height:24px;font-size:14px}
  .bracelet i:nth-of-type(odd){font-size:15px}
  .actions{width:100%;justify-content:space-between}
  .wordmark{font-size:20px}
}