/* TAKPICS shoot pages (/now, /s/CODE, /clock, /admin). Same tokens as the main site. */
:root{
  --black:#080808;--offwhite:#e8e4dc;--cream:#c9c3b4;--accent:#c8a96e;
  --line:rgba(232,228,220,.1);--dim:rgba(232,228,220,.45);
  --mono:'DM Mono',monospace;--display:'Bebas Neue',sans-serif;--serif:'Cormorant Garamond',serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--black);color:var(--offwhite);font-family:var(--mono);-webkit-text-size-adjust:100%}
body{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
a{color:var(--accent)}
.top{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line)}
.top img{height:36px;display:block}
.top a.back{font-size:10px;letter-spacing:.25em;text-transform:uppercase;color:var(--dim);text-decoration:none}
.wrap{width:100%;max-width:560px;margin:0 auto;padding:40px 20px 60px;flex:1}
.wrap.wide{max-width:960px}
.label{font-size:10px;letter-spacing:.32em;color:var(--accent);text-transform:uppercase;margin-bottom:14px;display:flex;align-items:center;gap:12px}
.label::after{content:'';flex:1;height:1px;background:rgba(200,169,110,.3)}
h1{font-family:var(--display);font-weight:400;font-size:clamp(46px,13vw,88px);line-height:.9;letter-spacing:.03em;margin-bottom:14px}
h2{font-family:var(--display);font-weight:400;font-size:30px;letter-spacing:.04em;margin:34px 0 12px}
.sub{font-family:var(--serif);font-style:italic;font-size:19px;color:var(--cream);opacity:.8;line-height:1.5}
.meta{font-size:11px;letter-spacing:.18em;color:var(--dim);text-transform:uppercase;margin-top:14px;line-height:1.9}
.card{border:1px solid var(--line);background:rgba(232,228,220,.03);padding:22px 20px;margin-top:26px}
.stamp{font-family:var(--display);font-size:52px;letter-spacing:.04em;color:var(--accent);line-height:1}
.small{font-size:11px;letter-spacing:.08em;color:var(--dim);line-height:1.7}
label.f{display:block;font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--dim);margin:18px 0 8px}
input[type=text],input[type=email],input[type=password],input[type=date],textarea{
  width:100%;background:rgba(232,228,220,.05);border:1px solid rgba(232,228,220,.16);color:var(--offwhite);
  font-family:var(--mono);font-size:16px;padding:14px;border-radius:0;-webkit-appearance:none;outline:none}
input:focus,textarea:focus{border-color:var(--accent)}
input[type=date]{color-scheme:dark;font-size:14px;padding:13px 8px;min-height:50px}
.btn{display:block;width:100%;margin-top:16px;padding:16px;background:var(--accent);color:var(--black);border:none;cursor:pointer;
  font-family:var(--mono);font-size:12px;letter-spacing:.28em;text-transform:uppercase;text-align:center;text-decoration:none}
.btn.ghost{background:transparent;color:var(--offwhite);border:1px solid rgba(232,228,220,.25)}
.btn:disabled{opacity:.5}
.row{display:flex;gap:10px;flex-wrap:wrap}.row>*{flex:1;min-width:130px}
.msg{margin-top:12px;font-size:12px;letter-spacing:.06em;min-height:1em}
.msg.ok{color:var(--accent)}.msg.err{color:#e07a6a}
.foot{padding:20px;text-align:center;font-size:10px;letter-spacing:.25em;color:rgba(232,228,220,.25);text-transform:uppercase}
.badge{display:inline-block;font-size:9px;letter-spacing:.2em;padding:3px 7px;border:1px solid currentColor;text-transform:uppercase;vertical-align:middle}
.badge.live{color:#7fd28a}
table{width:100%;border-collapse:collapse;font-size:12px;margin-top:10px}
td,th{text-align:left;padding:9px 6px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:9px;letter-spacing:.22em;color:var(--dim);text-transform:uppercase;font-weight:400}
/* Older phones (no aspect-ratio): square tiles via padding, contents laid over them */
@supports not (aspect-ratio:1){
  .grid .tl,.grid>a,.bkgrid div,.thumbs a,.thumbs button{height:0;padding-bottom:100%}
  .grid .tl>.op,.grid img,.bkgrid img,.thumbs img{position:absolute;top:0;left:0;width:100%;height:100%}
}