/* ---------------------------------------------------------------
   Apercu — licensed from Colophon Foundry. Self-hosted from ./fonts.
   Confirm the license covers web embedding before shipping publicly.
   --------------------------------------------------------------- */
@font-face{font-family:"Apercu Pro";src:url("/fonts/ApercuPro-Regular.woff2")format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Apercu Pro";src:url("/fonts/ApercuPro-Italic.woff2")format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Apercu Pro";src:url("/fonts/ApercuPro-Medium.woff2")format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Apercu Pro";src:url("/fonts/ApercuPro-Bold.woff2")format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Apercu Pro";src:url("/fonts/ApercuPro-Black.woff2")format("woff2");font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:"Apercu Mono";src:url("/fonts/ApercuMonoPro-Regular.woff2")format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Apercu Mono";src:url("/fonts/ApercuMonoPro-Medium.woff2")format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Apercu Mono";src:url("/fonts/ApercuMonoPro-Bold.woff2")format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* ---- Glossier digital tokens ---- */
:root{
  --g-pink-light:#FAF2F4;
  --g-pink:#F8E6EA;
  --g-black:#000000;
  --g-white:#FFFFFF;
  --g-cta-blue:#0600FF;
  --g-gray-shopgrid:#F7F7F7;
  --g-gray:#E3E3E3;
  --g-font:"Apercu Pro",ui-sans-serif,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --g-font-mono:"Apercu Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --g-leading-body:1.333;
  --g-tracking-display:0.02em;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}

body{
  font-family:var(--g-font);
  font-weight:400;
  line-height:var(--g-leading-body);
  letter-spacing:0;
  color:var(--g-black);
  background:var(--g-pink);
  -webkit-font-smoothing:antialiased;
}

.page{max-width:760px;margin:0 auto;padding:40px 24px 80px}

/* ---- Header ---- */
header{padding:8px 0 40px}
.wordmark{display:block;width:180px;height:auto}
.eyebrow{
  font-family:var(--g-font-mono);
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin:20px 0 0;
}

/* ---- Type ---- */
h1{
  font-weight:700;
  text-transform:uppercase;
  line-height:1;
  letter-spacing:var(--g-tracking-display);
  font-size:clamp(2rem,7vw,3.25rem);
  margin:12px 0 20px;
}
.lede{font-size:1.0625rem;max-width:46ch;margin:0}

/* ---- Card ---- */
.card{
  background:var(--g-white);
  border:1px solid var(--g-black);
  padding:28px;
  margin-top:32px;
}
h2{
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:var(--g-tracking-display);
  font-size:.875rem;
  line-height:1;
  margin:0 0 22px;
  padding-bottom:14px;
  border-bottom:1px solid var(--g-black);
}

/* ---- Fields ---- */
.fields{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field{display:flex;flex-direction:column}
.field--full{grid-column:1/-1}
label{
  font-family:var(--g-font-mono);
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-bottom:8px;
}
select{
  font-family:var(--g-font);
  font-size:1rem;
  color:var(--g-black);
  background:var(--g-white);
  border:1px solid var(--g-black);
  border-radius:0;
  padding:12px 40px 12px 14px;
  width:100%;
  min-height:47px;
  -webkit-appearance:none;
  appearance:none;
}

/* Caret is drawn in CSS rather than an inline SVG background: the page's CSP
   sets img-src 'self', which excludes data: URIs. */
.selectwrap{display:block;position:relative}
.selectwrap::after{
  content:"";
  position:absolute;
  right:16px;
  top:50%;
  width:7px;height:7px;
  margin-top:-5px;
  border-right:1.5px solid var(--g-black);
  border-bottom:1.5px solid var(--g-black);
  transform:rotate(45deg);
  pointer-events:none;
}
.selectwrap:has(select:disabled)::after{opacity:.35}
select:focus-visible{outline:2px solid var(--g-cta-blue);outline-offset:1px}
select:disabled{background-color:var(--g-gray-shopgrid);cursor:not-allowed}
select[aria-invalid="true"]{background-color:var(--g-pink-light)}

input[type="text"],input[type="date"]{
  font-family:var(--g-font);
  font-size:1rem;
  color:var(--g-black);
  background:var(--g-white);
  border:1px solid var(--g-black);
  border-radius:0;
  padding:12px 14px;
  width:100%;
  -webkit-appearance:none;
  appearance:none;
}
input[type="date"]{min-height:47px}
input:focus-visible{outline:2px solid var(--g-cta-blue);outline-offset:1px}
input[aria-invalid="true"]{background:var(--g-pink-light)}
.hint{font-family:var(--g-font-mono);font-size:.6875rem;margin-top:8px}
.error{
  font-family:var(--g-font-mono);
  font-size:.6875rem;
  color:var(--g-cta-blue);
  margin-top:8px;
  min-height:1em;
}

/* ---- Agreement ---- */
.nda{
  border:1px solid var(--g-black);
  background:var(--g-gray-shopgrid);
  padding:24px;
  height:340px;
  overflow-y:auto;
  font-size:.9375rem;
}
.nda p{margin:0 0 1em}
.nda ol{margin:0;padding-left:1.4em}
.nda li{margin-bottom:1em}
.nda li:last-child{margin-bottom:0}
.nda .end{
  font-family:var(--g-font-mono);
  font-size:.6875rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  margin:24px 0 0;
}
.scrollnote{
  font-family:var(--g-font-mono);
  font-size:.6875rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-top:10px;
}
.scrollnote[data-read="true"]{color:var(--g-cta-blue)}

.ack{
  display:flex;
  gap:14px;
  align-items:flex-start;
  margin-top:24px;
  padding-top:24px;
  border-top:1px solid var(--g-gray);
  cursor:pointer;
}
.ack input[type="checkbox"]{
  appearance:none;-webkit-appearance:none;
  flex:0 0 auto;
  width:22px;height:22px;
  margin:1px 0 0;
  border:1px solid var(--g-black);
  border-radius:0;
  background:var(--g-white);
  cursor:pointer;
  display:grid;place-content:center;
}
.ack input[type="checkbox"]::after{
  content:"";
  width:10px;height:10px;
  background:var(--g-black);
  transform:scale(0);
}
.ack input[type="checkbox"]:checked::after{transform:scale(1)}
.ack input[type="checkbox"]:focus-visible{outline:2px solid var(--g-cta-blue);outline-offset:2px}
.ack input[type="checkbox"]:disabled{background:var(--g-gray);cursor:not-allowed}
/* .ack is a <label>, so it inherits the mono utility styling above — reset it.
   Acknowledgement copy is sentence-case body text, not a field label. */
.ack span{
  font-family:var(--g-font);
  font-size:.9375rem;
  text-transform:none;
  letter-spacing:0;
  line-height:var(--g-leading-body);
  margin-bottom:0;
}

/* ---- Button ---- */
.actions{margin-top:32px}
button[type="submit"]{
  font-family:var(--g-font);
  font-size:.9375rem;
  font-weight:400;
  background:var(--g-cta-blue);
  color:var(--g-white);
  border:none;
  border-radius:0;
  padding:16px 32px;
  cursor:pointer;
  width:100%;
}
button[type="submit"]:hover{background:var(--g-black)}
button[type="submit"]:focus-visible{outline:2px solid var(--g-black);outline-offset:2px}

/* ---- Confirmation ---- */
.confirm{display:none}
.confirm h1{margin-top:0}
.receipt{display:grid;grid-template-columns:1fr;gap:0;margin:0}
.receipt div{
  display:flex;justify-content:space-between;gap:24px;
  padding:14px 0;border-bottom:1px solid var(--g-gray);
}
.receipt div:last-child{border-bottom:none}
.receipt dt{
  font-family:var(--g-font-mono);
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  margin:0;
}
.receipt dd{margin:0;font-size:.9375rem;text-align:right}
.again{
  font-family:var(--g-font-mono);
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  background:none;border:none;
  color:var(--g-cta-blue);
  padding:0;margin-top:28px;
  cursor:pointer;
  text-decoration:underline;
}

footer{
  font-family:var(--g-font-mono);
  font-size:.6875rem;
  margin-top:40px;
  max-width:60ch;
}

@media (max-width:560px){
  .fields{grid-template-columns:1fr}
  .card{padding:22px 18px}
  .nda{padding:18px;height:300px}
}

@media print{
  body{background:var(--g-white)}
  .again,.scrollnote{display:none}
}

/* =========================================================================
   Visitor log (/admin). Same tokens as the guest page — pink field, black
   text, square corners, Mono for utility labels and tabular data.
   ========================================================================= */

.page--wide{max-width:1100px}

.admin h1{font-size:clamp(1.5rem,4vw,2.25rem)}
.admin .lede{font-size:.9375rem}

.filter{
  display:flex;
  align-items:flex-end;
  gap:16px;
  flex-wrap:wrap;
  padding-bottom:22px;
  margin-bottom:22px;
  border-bottom:1px solid var(--g-black);
}
.filter .field{margin:0}
.filter button{
  font-family:var(--g-font);
  font-size:.875rem;
  background:var(--g-cta-blue);
  color:var(--g-white);
  border:none;border-radius:0;
  padding:12px 24px;
  cursor:pointer;
  min-height:47px;
}
.filter button:hover{background:var(--g-black)}
.filter .link{
  font-family:var(--g-font-mono);
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--g-cta-blue);
  padding-bottom:16px;
}

.tablewrap{overflow-x:auto}

table{width:100%;border-collapse:collapse;font-size:.875rem}
th{
  font-family:var(--g-font-mono);
  font-size:.6875rem;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.06em;
  text-align:left;
  padding:0 16px 10px 0;
  border-bottom:1px solid var(--g-black);
  white-space:nowrap;
}
td{
  padding:12px 16px 12px 0;
  border-bottom:1px solid var(--g-gray);
  vertical-align:top;
}
tbody tr:last-child td{border-bottom:none}
td.mono{font-family:var(--g-font-mono);font-size:.8125rem;white-space:nowrap}
td.empty{
  font-family:var(--g-font-mono);
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  padding:28px 0;
  border-bottom:none;
}

.count{
  font-family:var(--g-font-mono);
  font-size:.6875rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  margin:18px 0 0;
}