@import "tokens.css";
*{box-sizing:border-box}
:focus-visible{outline:var(--focus-width) solid var(--wb-orange);outline-offset:3px}
input,button,textarea{font:inherit;min-height:2.75rem;border-radius:var(--radius)}
.mark{border-radius:var(--radius-round);display:block}
.row{display:flex;flex-wrap:wrap;gap:var(--sp-1)}
input{flex:1 1 14rem;padding:0 var(--sp-2)}
button{padding:0 var(--sp-3);font-weight:700;cursor:pointer}
label{display:block;font-weight:700;margin-bottom:var(--sp-1)}
footer{display:flex;gap:var(--sp-3);flex-wrap:wrap;font-size:var(--fs-small)}
.draft{font-weight:700;border:2px solid currentColor;padding:var(--sp-1)}
.prose{max-width:36rem;padding:var(--sp-4) var(--sp-2)}

/* C: dark neutral, orange sole accent, centred watch-scale */
body{margin:0;min-height:100vh;background:var(--wb-ink);color:var(--wb-paper);font:var(--fs-body)/var(--lh-body) var(--font-sans);display:flex;flex-direction:column}
.face{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;max-width:34rem;width:100%;margin:0 auto;padding:var(--sp-4) var(--sp-3) var(--sp-3)}
.mark{width:min(72vw,260px);height:auto;margin-bottom:var(--sp-4)}
h1{font:300 var(--fs-small)/1 var(--font-sans);letter-spacing:.4em;text-transform:uppercase;margin:0 0 var(--sp-2)}
.tag{font:300 var(--fs-xl)/1.1 var(--font-sans);margin:0;text-wrap:balance}
.sub{margin:var(--sp-2) 0 0}
form{width:100%;max-width:26rem;margin:var(--sp-4) 0 var(--sp-3);text-align:left}
input{background:var(--wb-ink);color:var(--wb-paper);border:2px solid var(--wb-paper);border-radius:var(--radius)}
button{background:var(--wb-orange);color:var(--wb-ink);border:2px solid var(--wb-orange)}
.note{font-size:var(--fs-small)}
a{color:var(--wb-paper)}
footer{justify-content:center;padding:var(--sp-3)}
.prose{margin:0 auto}
.prose a{color:var(--wb-orange)}
.prose .note{border-left:6px solid var(--wb-orange);padding-left:var(--sp-2)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
textarea{display:block;width:100%;min-height:8rem;margin:0 0 var(--sp-2);padding:var(--sp-2);background:var(--wb-ink);color:var(--wb-paper);border:2px solid var(--wb-paper)}
label+label,textarea+button,input+label{margin-top:var(--sp-2)}