/* UGNAY public site (home, about, announcements). Same palette and feel as the sign-in
   and sign-up pages: seastone blue + gold, mono small-caps labels, flowing marble-vein lines. */
:root{
  --blue:#1F4E5F; --blue-dark:#163842; --blue-mid:#2A647B;
  --gold:#E3A61E; --gold-tint:#FBF1D9; --gold-text:#6B4E00;
  --ink:#13262D; --muted:#5C6B71; --line:#DCE4E6; --page:#F4F7F7;
  --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;
  --sans:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body.site{font-family:var(--sans);color:var(--ink);background:var(--page);-webkit-font-smoothing:antialiased;line-height:1.5}
[hidden]{display:none!important}
a{color:inherit}
.site-wrap{min-height:100vh;display:flex;flex-direction:column}
.site-inner{width:min(1180px,100% - 48px);margin:0 auto}

/* ---------- top bar ---------- */
.site-top{position:relative;z-index:5;background:#fff;border-bottom:1px solid var(--line)}
.site-top .site-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
.site-brand{display:flex;align-items:center;gap:13px;text-decoration:none}
.site-mark{flex:none;width:46px;height:46px;border-radius:8px;display:block;object-fit:cover;box-shadow:0 6px 16px rgba(22,56,66,.2)}
.site-brand-text{display:flex;flex-direction:column;gap:3px}
.site-brand-name{font-size:21px;font-weight:800;letter-spacing:.02em;line-height:1;color:var(--ink)}
.site-brand-sub{font:600 10px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.site-nav{display:flex;align-items:center;flex-wrap:wrap;gap:6px 22px}
.site-nav a{font-size:14.5px;font-weight:600;color:var(--muted);text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
.site-nav a:hover{color:var(--blue);border-bottom-color:var(--gold)}
.site-nav a[aria-current="page"]{color:var(--blue);border-bottom-color:var(--gold)}
.site-nav a.site-cta{padding:10px 20px;border:1px solid var(--blue);border-radius:999px;background:var(--blue);color:#fff;font:800 11.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;border-bottom:1px solid var(--blue)}
.site-nav a.site-cta:hover{background:var(--gold);border-color:var(--gold);color:#2B1F00}

/* ---------- hero ---------- */
.site-hero{position:relative;overflow:hidden;color:#fff;background:radial-gradient(900px 520px at 88% -8%,rgba(227,166,30,.2),transparent 62%),linear-gradient(160deg,var(--blue-dark) 0%,var(--blue) 55%,#27647B 100%)}
.site-hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:url(assets/motif-contours.svg) center/cover no-repeat}
.site-hero .site-inner{position:relative;z-index:2;padding:76px 0 70px}
.site-eyebrow{margin:0 0 6px;display:flex;align-items:center;gap:12px;font:700 11.5px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.82)}
.site-eyebrow::before{content:"";flex:none;width:34px;height:1px;background:rgba(255,255,255,.6)}
.site-hero h1{margin:12px 0 14px;font-size:clamp(46px,8vw,92px);font-weight:800;letter-spacing:-.035em;line-height:1;color:var(--gold)}
.site-hero h1::after{content:"";display:block;height:4px;width:min(100%,380px);margin-top:14px;border-radius:2px;background:linear-gradient(90deg,var(--gold),rgba(227,166,30,0))}
.site-meaning{margin:0 0 8px;max-width:34em;font-size:clamp(16px,2vw,20px);line-height:1.5;color:rgba(255,255,255,.92)}
.site-meaning b{color:var(--gold);font-weight:800}
.site-unit{margin:0 0 28px;font:600 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.site-actions{display:flex;flex-wrap:wrap;gap:12px}
.site-btn{display:inline-flex;align-items:center;gap:10px;height:54px;padding:0 28px;border-radius:16px;border:2px solid transparent;font:800 16px var(--sans);text-decoration:none;cursor:pointer;transition:background .12s,color .12s,transform .06s}
.site-btn:active{transform:translateY(1px)}
.site-btn-primary{background:#fff;color:var(--blue);box-shadow:0 8px 22px rgba(8,24,30,.22)}
.site-btn-primary:hover{background:var(--gold);color:#2B1F00}
.site-btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.site-btn-ghost:hover{background:#fff;color:var(--blue)}
.site-logos{display:flex;align-items:center;gap:14px;margin-top:40px}
.site-logo{width:62px;height:62px;border-radius:16px;background:#fff;display:grid;place-items:center;overflow:hidden}
.site-logo img{width:50px;height:50px;object-fit:contain;display:block}
.site-logos-text{display:flex;flex-direction:column;gap:3px}
.site-logos-text small{font:700 10px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.65)}
.site-logos-text strong{font-size:15px;font-weight:800;line-height:1.3}

/* RSU Research Building: a translucent photo fills the right of the banner and fades out toward the text.
   Tinted into the teal (luminosity blend) so it reads as part of the banner. Its width follows the window
   so the fade always finishes well before the heading, buttons and logos. */
.hero-photo{position:absolute;right:0;top:0;bottom:0;width:min(880px,58vw,calc(100vw - 600px));z-index:1;pointer-events:none;
  background:url(assets/redi-building.jpg) 62% 34%/cover no-repeat;mix-blend-mode:luminosity;opacity:.62;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 35%,#000 75%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 35%,#000 75%)}
.hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,56,66,0),rgba(22,56,66,.45))}
@media (max-width:1020px){
  /* too narrow for a side panel: the building becomes a quiet backdrop behind the content */
  .hero-photo{width:100%;opacity:.3;background-position:60% 30%;-webkit-mask-image:none;mask-image:none}
  .hero-photo::after{background:linear-gradient(180deg,rgba(22,56,66,.78) 0%,rgba(22,56,66,.55) 55%,rgba(22,56,66,.82) 100%)}
}

/* ---------- sections ---------- */
.site-section{padding:56px 0}
.site-section.alt{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.site-kicker{margin:0 0 10px;display:flex;align-items:center;gap:10px;font:800 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--blue)}
.site-kicker::before{content:"";width:28px;height:2px;background:var(--gold);border-radius:2px}
.site-h2{margin:0 0 8px;font-size:clamp(26px,3.4vw,36px);font-weight:800;letter-spacing:-.02em;line-height:1.15}
.site-lead{margin:0 0 28px;max-width:46em;font-size:17px;line-height:1.6;color:#33454C}
.site-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.site-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:22px;padding:24px 22px 22px;box-shadow:0 8px 24px rgba(22,56,66,.06)}
.site-card::before{content:"";position:absolute;left:22px;top:0;width:44px;height:4px;border-radius:0 0 4px 4px;background:var(--gold)}
.site-ico{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;margin-bottom:14px;background:var(--blue);color:var(--gold);box-shadow:inset 0 -3px 0 var(--gold)}
.site-card h3{margin:0 0 8px;font-size:19px;font-weight:800;letter-spacing:-.005em;color:var(--ink)}
.site-card p{margin:0;font-size:15.5px;line-height:1.6;color:#44565D}
.site-card ul{margin:10px 0 0;padding-left:18px;font-size:14.5px;line-height:1.6;color:#44565D}
.site-roles{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.site-role{padding:18px 18px 16px;border:1px solid var(--line);border-radius:18px;background:var(--page)}
.site-role b{display:block;margin-bottom:4px;font:800 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.site-role span{font-size:14.5px;color:#44565D;line-height:1.5}
.site-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;counter-reset:s}
.site-steps li{counter-increment:s;padding:18px 18px 16px;border:1px solid var(--line);border-radius:18px;background:#fff}
.site-steps li::before{content:counter(s);display:grid;place-items:center;width:34px;height:34px;margin-bottom:10px;border-radius:11px;background:var(--blue);color:var(--gold);font-weight:800;box-shadow:inset 0 -3px 0 var(--gold)}
.site-steps b{display:block;margin-bottom:4px;font-size:16px}
.site-steps span{font-size:14.5px;color:#44565D;line-height:1.5}

/* ---------- announcements: with pictures, or plain text ---------- */
.ann-list{display:flex;flex-direction:column;gap:16px}
.ann-card{background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:0 8px 24px rgba(22,56,66,.06)}
.ann-card.ann-text-only{border-left:6px solid var(--gold)}
.ann-pics{display:grid;gap:3px;background:var(--blue-dark)}
.ann-pics.n1{grid-template-columns:1fr}
.ann-pics.n2{grid-template-columns:1fr 1fr}
.ann-pics.n3,.ann-pics.n4{grid-template-columns:1fr 1fr}
.ann-pics a{display:block;height:clamp(140px,20vw,230px);overflow:hidden;background:var(--blue-dark)}
.ann-pics.n1 a{height:clamp(200px,30vw,340px)}
.ann-pics.n3 a:first-child{grid-column:1/-1;height:clamp(180px,26vw,300px)}
.ann-pics img{width:100%;height:100%;object-fit:cover;display:block}
.ann-body{padding:20px 24px 22px}
.ann-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ann-date{display:inline-block;padding:5px 12px;border-radius:999px;background:var(--gold-tint);color:var(--gold-text);font:800 11px var(--mono);letter-spacing:.1em;text-transform:uppercase}
.ann-new{display:inline-block;padding:4px 10px;border-radius:999px;background:var(--blue);color:var(--gold);font:800 10.5px var(--mono);letter-spacing:.12em}
.ann-title{margin:12px 0 8px;font-size:23px;font-weight:800;letter-spacing:-.01em;line-height:1.25;overflow-wrap:anywhere}
.ann-text{margin:0;font-size:16px;line-height:1.7;color:#33454C;white-space:pre-line;overflow-wrap:anywhere}
.ann-empty{padding:30px;text-align:center;color:var(--muted);background:#fff;border:1px dashed var(--line);border-radius:18px}
.ann-more{margin-top:16px}
.ann-more a{font-weight:800;color:var(--blue);text-underline-offset:3px}

/* ---------- home: announcements beside the Facebook feed ---------- */
.site-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,440px);gap:32px;align-items:start}
.site-split-side{position:sticky;top:20px}
.site-feed{background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:0 8px 24px rgba(22,56,66,.06);overflow:hidden}
.site-feed-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px 14px;border-bottom:1px solid var(--line);border-left:6px solid var(--gold)}
.site-feed-title{display:flex;flex-direction:column;gap:3px;min-width:0}
.site-feed-name{font-size:19px;font-weight:800;letter-spacing:-.01em;line-height:1.2;color:var(--ink)}
.site-feed-handle{font:600 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.site-live{flex:none;display:inline-flex;align-items:center;gap:7px;font:800 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-text)}
.site-live::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px rgba(227,166,30,.25)}
.site-feed-frame{background:#F7F9F9;padding:12px 0;display:flex;justify-content:center;min-height:300px}
.site-feed-frame iframe{display:block;border:0;max-width:100%;background:#fff}
.site-feed-note{margin:0;padding:12px 20px 14px;border-top:1px solid var(--line);font-size:12.5px;line-height:1.5;color:var(--muted)}
.site-feed-note a{color:var(--blue);font-weight:700;text-underline-offset:3px}
@media (max-width:980px){.site-split{grid-template-columns:1fr;gap:28px}.site-split-side{position:static}}

/* ---------- footer ---------- */
.site-foot{margin-top:auto;background:var(--blue-dark);color:rgba(255,255,255,.82);position:relative;overflow:hidden}
.site-foot .site-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:22px 0;font-size:13.5px}
.site-foot small{font:600 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.site-foot a{color:#fff;text-underline-offset:3px}

/* page title block for About / Announcements */
.site-pagehead{position:relative;overflow:hidden;color:#fff;background:linear-gradient(160deg,var(--blue-dark) 0%,var(--blue) 70%,#27647B 100%)}
.site-pagehead::before{content:"";position:absolute;inset:0;pointer-events:none;background:url(assets/motif-contours.svg) right center/cover no-repeat}
.site-pagehead .site-inner{position:relative;z-index:1;padding:46px 0 40px}
.site-pagehead h1{margin:8px 0 8px;font-size:clamp(32px,5vw,52px);font-weight:800;letter-spacing:-.03em;line-height:1.05}
.site-pagehead h1 span{color:var(--gold)}
.site-pagehead p{margin:0;max-width:40em;font-size:17px;color:rgba(255,255,255,.88)}

@media (max-width:760px){
  .site-inner{width:min(1180px,100% - 32px)}
  .site-top .site-inner{flex-wrap:wrap}
  .site-hero .site-inner{padding:48px 0 44px}
  .site-section{padding:40px 0}
  .site-btn{height:50px;padding:0 22px;font-size:15px}
  .site-brand-sub{display:none}
  .ann-body{padding:16px 18px 18px}
  .ann-title{font-size:20px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}