/* =======================================================================
   hackucd — hard-tech light theme
   Off-white paper + UCD navy ink. UCD gold as the only accent.
   No gradients, no shadows, no rounded corners.
   ======================================================================= */

@font-face{
  font-family:'Satoshi';
  src:url('fonts/Satoshi-700.woff2') format('woff2');
  font-weight:700;font-display:swap;
}
@font-face{
  font-family:'Satoshi';
  src:url('fonts/Satoshi-900.woff2') format('woff2');
  font-weight:900;font-display:swap;
}
@font-face{
  font-family:'GeneralSans';
  src:url('fonts/GeneralSans-400.woff2') format('woff2');
  font-weight:400;font-display:swap;
}
@font-face{
  font-family:'GeneralSans';
  src:url('fonts/GeneralSans-500.woff2') format('woff2');
  font-weight:500;font-display:swap;
}
@font-face{
  font-family:'GeneralSans';
  src:url('fonts/GeneralSans-600.woff2') format('woff2');
  font-weight:600;font-display:swap;
}
@font-face{
  font-family:'GeneralSans';
  src:url('fonts/GeneralSans-700.woff2') format('woff2');
  font-weight:700;font-display:swap;
}

:root{
  --bg:#f7f7f5;
  --surface:#ffffff;
  --ink:#002542;                 /* UCD navy dark */
  --muted:#5c6b78;
  --rule:rgba(0,37,66,.16);
  --rule-soft:rgba(0,37,66,.08);
  --gold:#fad239;                /* UCD gold — sole accent */
  --blue:#007db8;                /* UCD blue — focus rings only */
  --err:#a4271f;
  --radius:0;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --sans:'GeneralSans',system-ui,sans-serif;
  --display:'Satoshi',system-ui,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  display:flex;
  flex-direction:column;
  min-height:100svh;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{background:var(--gold);color:var(--ink)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- header corner brackets ---------- */
.bracket{
  position:absolute;
  width:14px;height:14px;
  border:0 solid var(--blue);
  pointer-events:none;
  opacity:0;
  animation:fadeIn .5s ease .15s forwards;
}
.bl-tl{top:10px;left:10px;border-top-width:1px;border-left-width:1px}
.bl-tr{top:10px;right:10px;border-top-width:1px;border-right-width:1px}
.bl-br{bottom:10px;right:10px;border-bottom-width:1px;border-right-width:1px}
.bl-bl{bottom:10px;left:10px;border-bottom-width:1px;border-left-width:1px}

/* ---------- top bar ---------- */
.topbar{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1.75rem clamp(1.5rem,4vw,3rem);
  border-bottom:1px solid var(--blue);
}
.wordmark{
  font-family:var(--display);
  font-weight:900;
  font-size:clamp(1.65rem,2.6vw,1.95rem);
  letter-spacing:-.02em;
  line-height:1;
  color:var(--ink);
  text-decoration:none;
}
.wordmark:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

.site-nav{display:flex;align-items:center;gap:1.6rem}
.site-nav a{
  position:relative;
  font-family:var(--mono);
  font-size:.74rem;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink);
  text-decoration:none;
  opacity:.55;
  padding:.25rem 0;
  transition:opacity .15s ease;
}
.site-nav a:hover{opacity:1}
.site-nav a:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.site-nav a[aria-current="page"]{opacity:1}
.site-nav a[aria-current="page"]::after{
  content:"";position:absolute;left:0;right:0;bottom:-.2rem;height:2px;background:var(--gold);
}
.site-nav a.nav-dim{opacity:.25;cursor:not-allowed;pointer-events:none}

/* ---------- main ---------- */
main{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  gap:clamp(2.2rem,6vh,3.5rem);
  padding:clamp(2rem,5vh,3.5rem) clamp(1.25rem,3.5vw,2.5rem) 0;
}

/* ---------- intro ---------- */
.intro{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.9rem;
  max-width:44rem;
  opacity:0;
  animation:fadeIn .6s ease .25s forwards;
}
.intro h1{
  font-family:var(--display);
  font-weight:900;
  font-size:clamp(1.8rem,4.5vw,2.7rem);
  letter-spacing:-.02em;
  line-height:1.1;
  color:var(--ink);
}
.intro p{
  font-family:var(--sans);
  font-size:clamp(1rem,2vw,1.12rem);
  font-weight:500;
  line-height:1.6;
  color:var(--muted);
}

/* ---------- timer ---------- */
.timer{
  width:min(100%,52rem);
  border:1px solid var(--rule);
  border-top:2px solid var(--blue);
  background:var(--surface);
  opacity:0;
  animation:fadeIn .6s ease .35s forwards;
}
.timer-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
}
.unit{
  display:flex;
  flex-direction:column;
  gap:.9rem;
  align-items:center;
  padding:clamp(1.4rem,3vw,2.2rem) clamp(.5rem,1.5vw,1.25rem);
}
.unit + .unit{border-left:1px solid var(--rule)}
.num{
  font-family:var(--mono);
  font-weight:500;
  font-size:clamp(2.2rem,7.5vw,5.4rem);
  line-height:1;
  font-variant-numeric:tabular-nums;
  color:var(--ink);
  min-width:2ch;
  text-align:center;
}
.lbl{
  font-family:var(--mono);
  font-size:.6rem;
  font-weight:500;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--muted);
}

/* ---------- content panel (sponsors etc.) ---------- */
.panel{
  width:min(100%,38rem);
  border:1px solid var(--rule);
  border-top:2px solid var(--blue);
  background:var(--surface);
  padding:clamp(2.2rem,5vw,3.5rem) clamp(1.5rem,4vw,3rem);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.4rem;
  opacity:0;
  animation:fadeIn .6s ease .35s forwards;
}
.panel-label{
  font-family:var(--mono);
  font-size:.6rem;
  font-weight:500;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--blue);
}
.panel h1{
  font-family:var(--display);
  font-weight:900;
  font-size:clamp(1.7rem,4.5vw,2.4rem);
  letter-spacing:-.02em;
  line-height:1.1;
  color:var(--ink);
}
.panel p{
  font-family:var(--sans);
  font-size:clamp(1rem,2vw,1.12rem);
  font-weight:500;
  line-height:1.6;
  max-width:28rem;
  color:var(--ink);
}
.btn{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  display:inline-block;
  font-family:var(--mono);
  font-weight:500;
  font-size:.72rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  white-space:nowrap;
  padding:.85rem 1.6rem;
  background:var(--gold);
  color:var(--ink);
  text-decoration:none;
  border-radius:var(--radius);
  transition:color .15s ease;
}
.btn::after{
  content:"";position:absolute;inset:0;
  background:var(--ink);
  transform:translateX(-101%);
  transition:transform .28s ease;
  z-index:-1;
}
.btn:hover{color:var(--bg)}
.btn:hover::after{transform:translateX(0)}
.btn:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* ---------- cta ---------- */
.cta{width:100%;max-width:34rem;margin-inline:auto}
.cta p{
  font-family:var(--sans);
  font-size:clamp(1rem,2vw,1.12rem);
  font-weight:500;
  margin-bottom:1.6rem;
  color:var(--ink);
}
.cta form{
  display:flex;
  align-items:center;
  gap:.4rem;
  width:100%;
  margin-inline:auto;
  background:var(--surface);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  padding:.35rem .35rem .35rem 1rem;
  transition:border-color .15s ease;
}
.cta form:focus-within{border-color:var(--blue)}
.cta input{
  flex:1;
  min-width:0;
  font-family:var(--sans);
  font-size:.98rem;
  padding:.65rem 0;
  background:transparent;
  border:0;
  color:var(--ink);
}
.cta input::placeholder{color:var(--muted);opacity:.7}
.cta input:focus{outline:none}
.cta button{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  font-family:var(--mono);
  font-weight:500;
  font-size:.72rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  white-space:nowrap;
  padding:.75rem 1.5rem;
  background:var(--gold);
  color:var(--ink);
  border:0;
  border-radius:var(--radius);
  cursor:pointer;
  transition:color .15s ease;
}
.cta button::after{
  content:"";position:absolute;inset:0;
  background:var(--ink);
  transform:translateX(-101%);
  transition:transform .28s ease;
  z-index:-1;
}
.cta button:hover{color:var(--bg)}
.cta button:hover::after{transform:translateX(0)}
.cta button:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.cta button:disabled{opacity:.6;cursor:default}
.cta button:active::after{transform:translateX(0)}
.msg{
  margin-top:1rem;
  font-family:var(--sans);
  font-weight:600;
  font-size:.92rem;
  min-height:1.2em;
  color:var(--ink);
}
.msg.err{color:var(--err)}

/* ---------- logos ---------- */
.logos{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1rem;
  padding:clamp(1.5rem,3vw,2rem) clamp(1.25rem,3.5vw,2.5rem) clamp(1.75rem,3.5vw,2.5rem);
  border-top:1px solid var(--blue);
}
.foot-label{
  font-family:var(--mono);
  font-size:.58rem;
  font-weight:500;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--muted);
}
.logo-row{display:flex;align-items:center;gap:clamp(1.5rem,4vw,2.75rem)}
.logos .logo{
  height:clamp(2.8rem,6vw,4rem);
  width:auto;
  border-radius:10px;
  opacity:.9;
  transition:opacity .2s ease,transform .2s ease;
  object-fit:cover;
}
.logos .logo:hover{opacity:1;transform:translateY(-2px)}
.logos .logo:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* ---------- responsive ---------- */
@media (max-width:620px){
  .topbar{
    flex-direction:column;
    align-items:center;
    gap:.7rem;
  }
  .timer-grid{grid-template-columns:repeat(2,1fr)}
  .unit + .unit{border-left:0}
  .unit:nth-child(even){border-left:1px solid var(--rule)}
  .unit:nth-child(n+3){border-top:1px solid var(--rule)}
}
@media (max-width:480px){
  .cta form{flex-direction:column;align-items:stretch;gap:.6rem;padding:1rem}
  .cta input{text-align:center}
  .cta button{width:100%;text-align:center}
}

/* ---------- motion ---------- */
@keyframes fadeIn{to{opacity:1}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .bracket,.timer,.intro{opacity:1}
}