*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--color-background-tertiary);color:var(--ink);font-family:var(--sans);}

.page-wrapper{max-width:1080px;margin:0 auto;padding:2.5rem 2rem;}
.stack{padding:2rem 0 .5rem;font-family:var(--sans);position:relative;}

.vert-mark{position:absolute;top:14rem;right:-4px;writing-mode:vertical-rl;font-family:var(--serif);font-size:10px;letter-spacing:.5em;color:var(--brass);opacity:.35;user-select:none;}

.eyebrow{font-size:10px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--brass);}
.eyebrow-mute{font-size:10px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);}
.serif-big{font-family:var(--serif);font-size:52px;font-weight:400;line-height:1;letter-spacing:.04em;color:var(--ink);}
.serif-it{font-family:var(--serif);font-style:italic;font-size:18px;color:var(--ink);letter-spacing:.005em;}
.serif-num{font-family:var(--serif);font-size:40px;font-weight:400;line-height:1;letter-spacing:-.02em;color:var(--ink);}
.serif-num-sm{font-family:var(--serif);font-size:28px;font-weight:400;line-height:1;letter-spacing:-.015em;color:var(--ink);}

.stars{color:var(--brass);font-size:9px;letter-spacing:.6em;margin:0 0 14px;}
.ornament-diamond{color:var(--brass);font-size:8px;}
.brass-rule{height:.5px;background:var(--brass-ghost);margin:14px 0;}

.header{padding-bottom:2rem;margin-bottom:2rem;border-bottom:.5px solid var(--brass-ghost);}
.header-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px;}
.clock{font-family:var(--mono);font-size:22px;font-weight:400;color:var(--ink);letter-spacing:.04em;}
.clock-sub{font-family:var(--serif);font-style:italic;font-size:12px;color:var(--brass);margin-top:4px;text-align:right;letter-spacing:.02em;}

button{font-family:var(--sans);}

.sub-label{font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:var(--mute);margin-bottom:10px;}
.sub-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}

.empty{font-size:13px;color:var(--mute);padding:18px 0;font-family:var(--serif);font-style:italic;text-align:center;letter-spacing:.02em;}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;}

/* INPUTS — Fixed color in all states */
textarea,
input[type=text],
input[type=date],
input[type=time],
input[type=number],
input:not([type]),
select{
  box-sizing:border-box;
  font-family:var(--sans);
  border-radius:2px;
  background:var(--color-background-input);
  color:var(--ink) !important;
  /* Some Chromium forks (Brave/Comet/Vivaldi) and autofill set -webkit-text-fill-color
     independently of color, which makes input text appear black on dark backgrounds.
     Force it explicitly to match `color`. */
  -webkit-text-fill-color:var(--ink) !important;
  border:.5px solid var(--hair-strong);
  padding:8px 11px;
  font-size:13px;
  letter-spacing:.005em;
  transition:border-color .2s, background .2s, box-shadow .3s var(--ease-silk);
  caret-color:var(--brass);
}
/* Autofill states (Chrome/Edge/Brave: persistent yellow background + black text). */
textarea:-webkit-autofill,
input:-webkit-autofill,
select:-webkit-autofill{
  -webkit-text-fill-color:var(--ink) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--color-background-input) inset !important;
  caret-color:var(--brass);
}
textarea:hover,input[type=text]:hover,input[type=date]:hover,input[type=time]:hover,input[type=number]:hover,select:hover{
  border-color:var(--brass-ghost);
}
textarea:focus,input:focus,select:focus{
  outline:none;
  border-color:var(--brass);
  background:var(--color-background-primary);
  box-shadow:0 0 0 3px rgba(168,132,85,0.08);
}
textarea::placeholder,input::placeholder{color:var(--ghost);font-style:italic;font-family:var(--serif);font-size:13px;}
textarea.bias-input{font-family:var(--serif);font-style:italic;}

/* DATE / TIME PICKER — Themed */
input[type=date],input[type=time]{
  color-scheme:light dark;
  accent-color:var(--brass);
}
@media (prefers-color-scheme:dark){
  input[type=date],input[type=time]{color-scheme:dark;}
}

input[type=date]::-webkit-calendar-picker-indicator,
input[type=time]::-webkit-calendar-picker-indicator{
  filter:invert(56%) sepia(25%) saturate(700%) hue-rotate(356deg) brightness(88%) contrast(87%);
  cursor:pointer;
  opacity:0.7;
  transition:opacity .2s;
}
input[type=date]::-webkit-calendar-picker-indicator:hover,
input[type=time]::-webkit-calendar-picker-indicator:hover{opacity:1;}
@media (prefers-color-scheme:dark){
  input[type=date]::-webkit-calendar-picker-indicator,
  input[type=time]::-webkit-calendar-picker-indicator{
    filter:invert(75%) sepia(20%) saturate(500%) hue-rotate(0deg) brightness(90%) contrast(85%);
  }
}

input[type=checkbox]{transition:transform .15s var(--ease-press);cursor:pointer;}
input[type=checkbox]:active{transform:scale(1.3);}