/* Up-To — public site
   Every colour below is an official Santa Clara University brand colour,
   taken from scu.edu/umc/brand/colors. The app's own design tokens already
   use these same values (tokens_color.dart: primary #A32035, ink #2A373F,
   inkSecondary #425766), so the site and the app agree by construction.

   Deliberately single-theme. SCU's palette is a warm light system — Mission
   Red has no accessible counterpart on a dark ground in the brand guidelines,
   and inventing one would put a non-brand colour on the page. Every surface
   and text colour is painted explicitly so the page holds on any host. */

:root{
  /* SCU primary */
  --mission-red:#a32035;      /* PMS 201 C */
  --bronco-red:#862633;       /* PMS 202 C */
  --stone:#758592;            /* PMS 7544 C */

  /* SCU neutrals */
  --slate-dark:#2a373f;
  --slate:#425766;
  --fog-light:#efece9;
  --fog:#e0dad3;

  /* roles */
  --ground:#efece9;
  --surface:#ffffff;
  --ink:#2a373f;
  --ink-secondary:#425766;
  --muted:#758592;
  --hairline:#e0dad3;
  --accent:#a32035;
  --accent-deep:#862633;
  --accent-wash:#f8f3e5;    /* Adobe Light */

  --sans:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --serif:"Crimson Pro",Georgia,"Times New Roman",serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:#efece9}
body{
  margin:0;background:var(--ground);color:var(--ink-secondary);
  font-family:var(--sans);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;min-height:100vh;
}
main{flex:1}
.wrap{max-width:46rem;margin:0 auto;padding:0 1.5rem;width:100%}

/* ---------- site header ---------- */
.site-head{background:var(--surface);border-bottom:1px solid var(--hairline)}
.site-head .wrap{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding-top:1.05rem;padding-bottom:1.05rem;
}
.wordmark{
  font-weight:800;font-size:1.18rem;letter-spacing:-.025em;
  color:var(--ink);text-decoration:none;
}
.wordmark span{color:var(--accent)}
.site-head nav{display:flex;gap:1.3rem}
.site-head nav a{font-size:.88rem;font-weight:500;color:var(--ink-secondary);text-decoration:none}
.site-head nav a:hover{color:var(--accent)}

/* ---------- hero ---------- */
.hero{padding:4.5rem 0 3.25rem;text-align:center}
.hero h1{
  font-size:clamp(2.15rem,6vw,3.3rem);font-weight:800;letter-spacing:-.035em;
  line-height:1.08;margin:0 0 1rem;color:var(--ink);text-wrap:balance;
}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero p{font-size:1.08rem;color:var(--ink-secondary);margin:0 auto 2rem;max-width:36ch}
.appstore{
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--accent);color:#ffffff;text-decoration:none;
  font-weight:700;font-size:.95rem;padding:.8rem 1.7rem;border-radius:999px;
  box-shadow:0 1px 2px rgba(42,55,63,.16);
}
.appstore:hover{background:var(--accent-deep)}

/* ---------- features ---------- */
.features{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(11.5rem,1fr));
  gap:1.9rem;padding:0 0 4.5rem;
}
.features .rule{width:1.9rem;height:3px;background:var(--accent);border-radius:2px;margin:0 0 .85rem}
.features h2{font-size:1rem;font-weight:800;margin:0 0 .4rem;color:var(--ink);letter-spacing:-.01em}
.features p{margin:0;font-size:.92rem;color:var(--ink-secondary)}

/* ---------- document pages ---------- */
.doc{padding:3.5rem 0 4rem}
.doc-label{
  font-size:.7rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--accent);margin:0 0 .8rem;
}
.doc h1{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(2rem,5.5vw,2.8rem);letter-spacing:-.015em;
  line-height:1.1;margin:0 0 .7rem;color:var(--ink);
}
.doc .lede{font-size:1.02rem;color:var(--ink-secondary);margin:0 0 2.75rem;max-width:54ch}

.doc section{margin:0 0 2.1rem}
.doc section h2{
  font-size:1rem;font-weight:800;margin:0 0 .45rem;color:var(--ink);
  display:flex;gap:.65rem;align-items:baseline;letter-spacing:-.01em;
}
.doc section h2 .n{
  font-family:var(--serif);font-size:1.05rem;font-weight:600;color:var(--accent);
  font-variant-numeric:tabular-nums;
}
.doc section p{margin:0;color:var(--ink-secondary);font-size:.97rem;max-width:66ch}

.contact{
  background:var(--accent-wash);border-left:3px solid var(--accent);
  padding:1.15rem 1.35rem;border-radius:0 4px 4px 0;margin:2.75rem 0 0;
}
.contact h2{font-size:.96rem;font-weight:800;margin:0 0 .4rem;color:var(--ink)}
.contact p{margin:0;font-size:.93rem;color:var(--ink-secondary)}
.contact a{color:var(--accent);font-weight:600}
.updated{
  font-size:.8rem;color:var(--muted);
  border-top:1px solid var(--hairline);padding-top:1.25rem;margin-top:2.75rem;
}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--hairline);background:var(--surface);padding:2rem 0}
.site-foot .wrap{
  display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;
  align-items:center;justify-content:space-between;
}
.site-foot p{margin:0;font-size:.84rem;color:var(--muted)}
.site-foot nav{display:flex;flex-wrap:wrap;gap:1.3rem}
.site-foot a{font-size:.84rem;color:var(--ink-secondary);text-decoration:none}
.site-foot a:hover{color:var(--accent)}

a:focus-visible,.appstore:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}