/* ==========================================================
   CHITNIS GROUP WEBSITE STYLES
   Contents: 1 Colours | 2 Base | 3 Header and menu | 4 Hero | 5 Sections
             6 Join band and footer | 7 Desktop layout | 8 Publications page
             9 Content pages | 10 Nav hover animation
   Tip: to change a colour everywhere, change it once in section 1.
   ========================================================== */

/* 1. COLOURS (UVic brand palette) */
:root{
  --ink:#002754;    /* dark blue: main text, dark buttons, footer (UVic primary) */
  --blue:#005493;   /* blue: links, dates, labels (UVic primary) */
  --ground:#F3F7FA; /* page background, a very pale blue-grey */
  --rule:#C7D8E6;   /* thin divider lines */
  --green:#008538;  /* dark green: rules above items, Join band (UVic secondary) */
  --sky:#BEE7F9;    /* light blue: Recognition band (UVic accent) */
  --yellow:#F5AA1C; /* yellow: only the 'Get in touch' button (UVic accent) */
}

/* 2. BASE: font, text size and default page width. .wrap centres content in a column
   (max-width 1120px) with side padding. The font is loaded from Google Fonts in each page's <head>. */
*{box-sizing:border-box}
body{margin:0;font:17px/1.55 "Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:var(--ground)}
a{color:var(--blue)}a:hover{color:var(--ink)}
h1,h2,h3,p{margin:0}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px}
.skip:focus{left:8px;top:8px;z-index:20;padding:8px 12px;background:#fff}

/* 3. HEADER AND MENU. Sticky bar; on phones the links collapse behind the Menu button (js/menu.js). */
.site-header{position:sticky;top:0;z-index:10;background:var(--ground);border-bottom:1px solid var(--rule)}
.bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;min-height:60px}
.brand{font-weight:800;font-size:19px;color:var(--ink);text-decoration:none}
.menu-btn{display:none;min-height:44px;padding:0 0 0 16px;border:0;background:none;font:inherit;font-weight:600;color:var(--blue);cursor:pointer}
.js .menu-btn{display:block}
.site-nav{display:flex;flex-direction:column;flex-basis:100%;padding-bottom:12px}
.site-nav a{padding:12px 0;font-weight:600;text-decoration:none;border-top:1px solid var(--rule)}
.js .site-nav{display:none}
.js .nav-open .site-nav{display:flex}

/* 4. HERO (home page top). The photo is images/hero.jpg, cropped to fill the box.
   object-position picks which part stays visible: the first number moves it left/right,
   the second up/down (0% to 100%). min-height sets how tall the hero is. */
.hero{position:relative;overflow:hidden;min-height:820px;padding:48px 0 56px;background:#8FA9D4;color:#002754}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:48% 50%}
.hero::after{content:"";position:absolute;left:0;right:0;top:0;height:65%;background:linear-gradient(rgba(243,247,250,.4),rgba(243,247,250,0))}
.hero .wrap{position:relative;z-index:1}
.hero h1{margin-bottom:16px;font-size:36px;line-height:1.1;font-weight:800;letter-spacing:-.02em}
.lead{max-width:680px;margin-bottom:12px;font-size:18px}
.role{margin-bottom:28px}
.actions{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;min-height:48px;padding:0 22px;border-radius:8px;font-weight:600;text-decoration:none}
.btn-solid{background:var(--ink);color:#fff}
.btn-solid:hover{background:var(--blue);color:#fff}
.btn-outline{background:#fff;border:2px solid var(--ink);color:var(--ink)}
.btn-yellow{background:var(--yellow);color:var(--ink)}
.btn-yellow:hover{background:#fff;color:var(--ink)}

/* 5. SECTIONS: headings, two-column text, Recognition items, news grids, earlier-news box.
   Grids use auto-fit, so columns stack by themselves on narrow screens. */
.sec{padding:44px 0 0}
.news{padding-bottom:12px}
h2{margin-bottom:20px;font-size:28px;line-height:1.15;font-weight:800}
h3{font-size:20px;line-height:1.25}
.two{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.two h3{margin-bottom:6px}
.more{margin-top:20px;font-weight:600}
.band{margin-top:36px;padding:44px 0 36px;background:var(--sky)}
.items{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.item{padding-top:18px;border-top:3px solid var(--green)}
.item h3{margin:2px 0 6px}
.date{font-weight:600;color:var(--blue)}
.news-grid{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.news-grid h3{margin-bottom:4px;font-size:18px;color:var(--blue)}
.news-grid p+p{margin-top:8px}
.earlier{margin-top:28px;border-top:1px solid var(--rule)}
.earlier summary{display:flex;align-items:center;min-height:52px;font-weight:600;color:var(--blue);cursor:pointer}
.earlier-grid{display:grid;gap:12px 32px;padding-bottom:12px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}

/* 6. JOIN BAND (green) AND FOOTER (dark blue) */
.join{margin-top:32px;padding:40px 0;background:var(--green);color:#fff}
.join .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 48px}
.join h2{margin-bottom:10px}
.join p{max-width:680px}
.join :focus-visible{outline-color:#fff}
.site-footer{padding:28px 0;background:var(--ink);color:var(--sky)}
.site-footer .wrap{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 32px}
.tag{font-size:20px;font-style:italic;color:#fff}
.copy{font-size:15px}

/* 7. DESKTOP LAYOUT: everything below applies on screens 760px wide or more
   (bigger text, menu links across the top, larger spacing). */
@media (min-width:760px){
body{font-size:18px}
.wrap{padding:0 32px}
.bar{min-height:72px}
.brand{font-size:21px}
.js .menu-btn{display:none}
.site-nav,.js .site-nav,.js .nav-open .site-nav{display:flex;flex-direction:row;flex-basis:auto;gap:0 28px;padding:0}
.site-nav a{border:0}
.hero{min-height:660px;padding:88px 0 56px}
.hero img{object-position:50% 8%}
.hero h1{max-width:820px;margin-bottom:24px;font-size:64px;line-height:1.04;letter-spacing:-.025em}
.lead{margin-bottom:14px;font-size:21px}
.role{margin-bottom:36px}
.btn{min-height:52px;padding:0 26px}
.sec{padding-top:72px}
.news{padding-bottom:0}
h2{margin-bottom:28px;font-size:32px}
h3{font-size:22px}
.two{gap:40px}
.band{margin-top:72px;padding:72px 0}
.items,.news-grid{gap:40px}
.news-grid h3{font-size:20px}
.earlier{margin-top:48px;padding-top:12px}
.earlier summary{font-size:22px;font-weight:800;color:var(--ink)}
.earlier-grid{font-size:16px}
.join{margin-top:72px;padding:56px 0}
.site-footer{padding:36px 0}
.tag{font-size:22px}
}

/* 8. PUBLICATIONS PAGE: year headings, paper entries, graphics. */
.site-nav a[aria-current="page"]{color:var(--ink);text-decoration:underline;text-decoration-color:var(--green);text-decoration-thickness:3px;text-underline-offset:6px}
.page-head{padding:44px 0 4px}
.page-head h1{margin-bottom:12px;font-size:36px;line-height:1.1;font-weight:800;letter-spacing:-.02em}
.page-links{display:flex;flex-wrap:wrap;gap:8px 28px;font-weight:600}
.yr{padding-top:36px}
.yr h2{margin-bottom:8px}
.pub{padding:20px 0;border-top:1px solid var(--rule)}
.ref{max-width:860px}
.no{font-weight:600;color:var(--blue)}
.note{color:var(--blue)}
.press{display:flex;flex-wrap:wrap;gap:4px 20px;margin-top:6px;font-size:16px;font-weight:600}
.toc{margin:14px 0 0}
.toc img{display:block;width:auto;max-width:100%;max-height:300px;height:auto;border:1px solid var(--rule);border-radius:6px;background:#fff}
@media (min-width:760px){
.page-head{padding-top:72px}
.page-head h1{font-size:56px}
.yr{padding-top:56px}
.pub{padding:28px 0}
}

/* 9. CONTENT PAGES (Research, Facilities, Group, Resources, Contact): text width, lists,
   photo gallery, profile layout. */
.prose{padding-bottom:56px}
.prose h2{margin:40px 0 12px}
.prose h3{margin:24px 0 8px}
.prose p{max-width:760px}
.prose p+p{margin-top:12px}
.lead-p{margin-top:8px;font-size:19px}
address{font-style:normal;max-width:760px}
.plain{margin:0;padding:0;list-style:none}
.plain li{padding:4px 0}
.links li,.refs li{padding:6px 0}
.cols li{break-inside:avoid}
.fig{margin:20px 0 0}
.fig img{display:block;max-width:100%;height:auto;border-radius:6px}
.gallery{display:grid;gap:16px;margin-top:28px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.gallery img{display:block;width:100%;height:220px;object-fit:cover;border-radius:6px}
.bio{display:grid;gap:24px;align-items:start}
.bio img{display:block;width:100%;max-width:320px;height:auto;border-radius:6px}
.spaced{margin-top:20px}
@media (min-width:760px){
.prose h2{margin-top:56px}
.cols{columns:2;column-gap:48px}
.bio{grid-template-columns:320px 1fr;gap:40px}
.lead-p{font-size:21px}
}
/* 10. NAV HOVER ANIMATION: green line slides in under a menu link (screens 760px and up).
   Change the speed with the .25s value; reduced-motion visitors get no animation. */
@media (min-width:760px){
.site-nav a{position:relative;transition:color .2s ease}
.site-nav a::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:3px;border-radius:2px;background:var(--green);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.site-nav a:hover,.site-nav a:focus-visible{color:var(--ink)}
.site-nav a:hover::after,.site-nav a:focus-visible::after,.site-nav a[aria-current="page"]::after{transform:scaleX(1)}
.site-nav a[aria-current="page"]{text-decoration:none}
}
@media (prefers-reduced-motion:reduce){.site-nav a,.site-nav a::after{transition:none}}

/* 4b. WIDE SCREENS (1000px and up): the hero grows with the window width so the photo is not
   cropped to a thin strip on a maximized desktop browser. --hero-h is the hero height: at least
   660px, about half the window width, and never more than 90% of the window height.
   The photo is nudged up just enough to keep the waves in view. */
@media (min-width:1000px){
.hero{--hero-h:clamp(660px,52vw,90vh);min-height:var(--hero-h)}
.hero img{object-position:50% calc(-1 * max(0px, 46.7vw - .87 * var(--hero-h)))}
}