/* ============================================================
   FACELIFT — Computational Social Cognition Lab
   A calm, editorial redesign anchored in slate blue
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Source+Sans+3:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,600&display=swap');

/* ---- CSS Variables ---- */
/*
   Palette anchored by lab logo: #8096c0 (slate blue, hue 218°, sat 30%, lum 66%)
   --accent          darker, richer blue for readable interactive elements (5:1 on white)
   --sidebar-bg      deep navy — the dark counterpart of the logo hue
   --sidebar-muted   the logo colour itself — naturally "muted" on dark navy
*/
:root {
  --bg:          #f5f7fa;   /* cool light blue-gray page background          */
  --surface:     #ffffff;   /* white — card/panel surfaces pop off bg         */
  --text:        #1e2433;   /* deep navy for headings and bold text           */
  --text-secondary: #4a5568; /* blue-gray for body copy                       */
  --text-muted:  #8096a8;   /* cool blue-gray — muted labels / meta          */
  --accent:      #4a6fa5;   /* slate blue — links, buttons (5:1 on white ✓)  */
  --accent-hover:#2d5286;   /* darker blue for hover / active states          */
  --accent-light:#e8edf5;   /* very light blue — selection bg / hover tints  */
  --border:      #d0d8e8;   /* light blue-gray border                         */
  --border-strong:#aabace;  /* medium blue-gray — stronger dividers           */
  --sidebar-bg:  #1a2440;   /* deep navy — dark counterpart of the logo hue  */
  --sidebar-text:#e4eaf5;   /* light blue-white text on navy sidebar          */
  --sidebar-muted:#8096c0;  /* logo colour — naturally muted on dark navy    */
  --sidebar-accent:#a8bedf; /* lighter blue — sidebar hover / accent          */
  --heading-font:'Libre Baskerville', 'Georgia', serif;
  --body-font:   'Source Sans 3', 'Segoe UI', sans-serif;
  --radius:      6px;
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.06);
  --shadow-md:   0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg:   0 8px 30px rgba(0,0,0,0.1);
  --transition:  0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---- Global Reset Overrides ---- */
body {
  background: var(--bg) !important;
  color: var(--text-secondary) !important;
  font-family: var(--body-font) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.75 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Subtle grain texture on body */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px;
}

/* ---- Typography ---- */
body, input, select, textarea {
  color: var(--text-secondary) !important;
  font-family: var(--body-font) !important;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--text) !important;
  font-family: var(--heading-font) !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.01em;
}

h1 {
  font-size: 2.8em !important;
  margin-bottom: 0.4em !important;
}

h2 {
  font-size: 1.6em !important;
  margin-top: 1.5em;
}

h3 {
  font-size: 1.2em !important;
}

@media screen and (max-width: 736px) {
  h1 { font-size: 2em !important; }
  h2 { font-size: 1.35em !important; }
}

p {
  margin: 0 0 1.6em 0 !important;
  color: var(--text-secondary);
}

strong, b {
  color: var(--text) !important;
  font-weight: 600 !important;
}

/* ---- Links ---- */
a {
  color: var(--accent) !important;
  text-decoration: none !important;
  border-bottom: 1px solid transparent !important;
  transition: color var(--transition), border-color var(--transition) !important;
}

a:hover {
  color: var(--accent-hover) !important;
  border-bottom-color: var(--accent-hover) !important;
}

/* ---- Main Content Area ---- */
#wrapper > #main {
  background: var(--bg) !important;
}

#main > .inner {
  max-width: 960px;
}

#header {
  border-bottom: 1px solid var(--border) !important;
  margin-bottom: 2em;
}

#header .logo {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.55em !important;
  color: var(--text-muted) !important;
  font-family: var(--body-font) !important;
  font-size: 0.9em !important;
  font-weight: 500 !important;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-bottom: none !important;
}

#header .logo img {
  height: 1.6em;
  width: auto;
  display: block;
  flex-shrink: 0;
  opacity: 0.82;
}

#header .logo strong {
  color: var(--text) !important;
  font-weight: 600 !important;
}

/* ---- Sidebar ---- */
#sidebar {
  background: var(--sidebar-bg) !important;
  overflow: hidden !important;
}

/* Disable slide transition on initial page load so the sidebar snaps
   off-screen instantly instead of animating in from visible. */
body.is-preload #sidebar {
  transition: none !important;
}

/* When sidebar is inactive, hide the inner panel completely.
   The scroll-lock JS sets .inner to position:fixed as the user scrolls,
   which breaks out of the sidebar's margin-left clipping and makes menu
   text float over the page. Hiding the inner when inactive prevents this. */
#sidebar.inactive > .inner {
  visibility: hidden !important;
  pointer-events: none !important;
}

#sidebar > .inner {
  color: var(--sidebar-text) !important;
}

#sidebar #menu header.major {
  display: none !important;
}

#sidebar #menu header.major h2 {
  color: var(--sidebar-muted) !important;
  font-family: var(--body-font) !important;
  font-size: 0.7em !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
  border-bottom-color: rgba(255,255,255,0.08) !important;
}

#sidebar #menu ul li a {
  color: var(--sidebar-text) !important;
  font-family: var(--body-font) !important;
  font-weight: 400 !important;
  font-size: 1em !important;
  border-bottom: none !important;
  border-top-color: rgba(255,255,255,0.05) !important;
  padding: 0.6em 0 !important;
  transition: color var(--transition), padding-left var(--transition) !important;
}

#sidebar #menu ul li a:hover {
  color: var(--sidebar-accent) !important;
  padding-left: 0.3em !important;
}

/* Sidebar toggle button — fixed top-left, always visible on scroll */
#sidebar .toggle {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 3.5em !important;
  height: 3.5em !important;
  line-height: 3.5em !important;
  text-indent: 0 !important;
  z-index: 10001 !important;
}

/* Sidebar toggle button — clean hamburger, no background */
#sidebar .toggle {
  background: transparent !important;
  box-shadow: none !important;
  color: transparent !important;
}

#sidebar .toggle:hover {
  background: transparent !important;
}

/* Replace Font Awesome icon with CSS hamburger lines */
#sidebar .toggle::before {
  font-family: unset !important;
  content: '' !important;
  width: 22px !important;
  height: 2px !important;
  background: var(--text) !important;
  border-radius: 1px !important;
  box-shadow:
    0 -7px 0 var(--text),
    0  7px 0 var(--text) !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  text-indent: 0 !important;
  font-size: 0 !important;
  transition: opacity var(--transition) !important;
}

#sidebar .toggle:hover::before {
  opacity: 0.5;
}

/* Hide background box on small screens */
#sidebar .toggle::after {
  background: transparent !important;
}

/* ---- Home / Banner ---- */
#banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3em;
  padding: 30vh 0 2em !important;
}

#banner .content {
  flex: 0;
  width: 0;
  overflow: hidden;
  padding: 0;
  margin: 0;
}

#banner .image.object {
  width: auto !important;
  max-width: 90% !important;
  flex-shrink: 1 !important;
  margin: 0 !important;
}

#banner .content header h1 {
  font-size: 2.6em !important;
  color: var(--text) !important;
  line-height: 1.2 !important;
  margin-bottom: 0.3em !important;
}

#banner .image.object img {
  border-radius: var(--radius);
}

/* ---- Section Headers ---- */
section > header.main h1 {
  position: relative;
  padding-bottom: 0.4em;
  margin-bottom: 1em !important;
}

section > header.main h1::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 3px;
  background: var(--accent);
  border-radius: 2px;
}

/* ---- Horizontal Rules ---- */
hr.major {
  border: 0 !important;
  border-top: 1px solid var(--border) !important;
  margin: 3em 0 !important;
}

/* ---- Research Page — Toggle Sections ---- */
details.research-toggle {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  margin-bottom: 1em !important;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), border-color var(--transition);
  overflow: hidden;
}

details.research-toggle:hover {
  border-color: var(--border-strong) !important;
  box-shadow: var(--shadow-md);
}

details.research-toggle[open] {
  border-color: var(--accent) !important;
  border-left: 3px solid var(--accent) !important;
}

details.research-toggle summary {
  padding: 1.2em 1.5em !important;
  font-family: var(--heading-font) !important;
  font-weight: 700 !important;
  font-size: 1.05em !important;
  color: var(--text) !important;
  cursor: pointer;
  list-style: none !important;
  display: flex;
  align-items: center;
  gap: 0.8em;
  transition: background var(--transition);
  background: transparent !important;
  border: none !important;
}

details.research-toggle summary::-webkit-details-marker {
  display: none;
}

/* Hide the default <details> disclosure marker (the square/triangle).
   It renders with list-style-position:outside, placing it OUTSIDE the
   summary's clickable area — causing both the visible square and the
   dead click zone on the left side of the toggle boxes. */
details.research-toggle summary::marker {
  content: '';
  font-size: 0;
}

details.research-toggle summary::before {
  display: none !important;
}

/* main.css injects a Font Awesome angle-right via .chev::before —
   this renders as a gray square/box on top of the logo icon. Hide it. */
details.research-toggle .chev::before {
  display: none !important;
  content: '' !important;
}

details.research-toggle summary .chev {
  display: inline-block;
  width: 28px;
  height: 28px;
  background-image: url('../../icons/Closed.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
  transition: opacity var(--transition);
  opacity: 0.7;
}

details.research-toggle[open] summary .chev {
  background-image: url('../../icons/Open.png');
  opacity: 1;
}

details.research-toggle summary:hover {
  background: rgba(74, 111, 165, 0.05) !important;
}

details.research-toggle .toggle-body {
  padding: 0 1.5em 1.5em !important;
  font-size: 0.95em;
  line-height: 1.8;
  color: var(--text-secondary);
  border-top: 1px solid var(--border);
}

/* ---- Join page dropdowns — background image with text highlight ---- */
#join-section details.research-toggle .toggle-body {
  background-image: url('../../photos/otomi.jpg');
  background-size: cover;
  background-position: center;
  padding: 1.5em !important;
  border-top: none;
  line-height: 2.4 !important;
}

#join-section details.research-toggle .toggle-body p.img-text {
  display: inline;
  background-color: rgba(255, 255, 255, 0.85);
  transition: background-color 0.35s ease, color 0.35s ease;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0.15em 0.4em;
  color: #111 !important;
  text-shadow: none;
  line-height: 2.4 !important;
}

#join-section details.research-toggle .toggle-body p.img-text + p.img-text {
  margin-top: 1em;
}

/* ---- Yale Undergraduate Researchers — override with cave.jpg ---- */
details#undergrad-yale .toggle-body {
  background-image: url('../../photos/cave.jpg') !important;
}

/* ---- Social Representation of Physical World — background image with text highlight ---- */
details#social-phys .toggle-body {
  background-image: url('../../photos/chair.jpg');
  background-size: cover;
  background-position: center;
  padding: 1.5em !important;
  border-top: none;
  line-height: 2.4 !important;
}

details#social-phys .toggle-body p.img-text {
  display: inline;
  background-color: rgba(255, 255, 255, 0.85);
  transition: background-color 0.35s ease, color 0.35s ease;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0.15em 0.4em;
  color: #111 !important;
  text-shadow: none;
  line-height: 2.4 !important;
}

/* ---- Social AI — background image with text highlight ---- */
details#social-ai .toggle-body {
  background-image: url('../../photos/computer.jpg');
  background-size: cover;
  background-position: center;
  padding: 1.5em !important;
  border-top: none;
  line-height: 2.4 !important;
}

details#social-ai .toggle-body p.img-text {
  display: inline;
  background-color: rgba(255, 255, 255, 0.85);
  transition: background-color 0.35s ease, color 0.35s ease;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0.15em 0.4em;
  color: #111 !important;
  text-shadow: none;
  line-height: 2.4 !important;
}

/* ---- Computational Basis of ToM — background image with text highlight ---- */
details#comp-tom .toggle-body {
  background-image: url('../../photos/train.jpg');
  background-size: cover;
  background-position: center;
  padding: 1.5em !important;
  border-top: none;
  line-height: 2.4 !important;
}

details#comp-tom .toggle-body p.img-text {
  display: inline;
  background-color: rgba(255, 255, 255, 0.85);
  transition: background-color 0.35s ease, color 0.35s ease;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0.15em 0.4em;
  color: #111 !important;
  text-shadow: none;
  line-height: 2.4 !important;
}

details#comp-tom .toggle-body p.img-text + p.img-text {
  margin-top: 1em;
}

/* ---- Development of Social Cognition — background image with text highlight ---- */
details#dev-socog .toggle-body {
  background-image: url('../../photos/dev.jpg');
  background-size: cover;
  background-position: center;
  padding: 1.5em !important;
  border-top: none;
  line-height: 2.4 !important;
}

details#dev-socog .toggle-body p.img-text {
  display: inline;
  background-color: rgba(255, 255, 255, 0.85);
  transition: background-color 0.35s ease, color 0.35s ease;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0.15em 0.4em;
  color: #111 !important;
  text-shadow: none;
  line-height: 2.4 !important;
}

/* ---- Lab Mission — background image with text highlight ---- */
details#lab-mission .toggle-body {
  background-image: url('../../photos/vasconselos.jpg');
  background-size: cover;
  background-position: center;
  padding: 1.5em !important;
  border-top: none;
  line-height: 2.4 !important;
}

details#lab-mission .toggle-body p.img-text {
  display: inline;
  background-color: rgba(255, 255, 255, 0.85);
  transition: background-color 0.35s ease, color 0.35s ease;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0.15em 0.4em;
  color: #111 !important;
  text-shadow: none;
  line-height: 2.4 !important;
}

/* ---- Language & ToM — background image with text highlight ---- */
details#lang-tom .toggle-body {
  background-image: url('../../photos/lang.jpg');
  background-size: cover;
  background-position: center;
  padding: 1.5em !important;
  border-top: none;
}

details#lang-tom .toggle-body {
  line-height: 2.4 !important;
}

details#lang-tom .toggle-body p.img-text {
  display: inline;
  background-color: rgba(255, 255, 255, 0.85);
  transition: background-color 0.35s ease, color 0.35s ease;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0.15em 0.4em;
  color: #111 !important;
  text-shadow: none;
  line-height: 2.4 !important;
}

/* ---- Making Our Minds Understood — background image with text highlight ---- */
details#minds-understood .toggle-body {
  background-image: url('../../photos/puppets.jpg');
  background-size: cover;
  background-position: center;
  padding: 1.5em !important;
  border-top: none;
}

details#minds-understood .toggle-body p.img-text {
  display: inline;
  background-color: rgba(255, 255, 255, 0.85);
  transition: background-color 0.35s ease, color 0.35s ease;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0.15em 0.4em;
  color: #111 !important;
  text-shadow: none;
  line-height: 2.4 !important;
}

details#minds-understood .toggle-body {
  line-height: 2.2 !important;
}

/* ---- Institutional Stance — background image with text highlight ---- */
details#institutional .toggle-body {
  background-image: url('../../photos/crowd.jpg');
  background-size: cover;
  background-position: center;
  padding: 1.5em !important;
  border-top: none;
}

details#institutional .toggle-body p.img-text {
  display: inline;
  background-color: rgba(255, 255, 255, 0.85);
  transition: background-color 0.35s ease, color 0.35s ease;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0.15em 0.4em;
  color: #111 !important;
  text-shadow: none;
  line-height: 2.4 !important;
}

details#institutional .toggle-body {
  line-height: 2.2 !important;
}

/* ---- Publications Page ---- */
.pub-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5em;
  padding: 1em 1.5em;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 2em;
  font-size: 0.9em;
}

.pub-legend span {
  display: flex;
  align-items: center;
  gap: 0.4em;
  color: var(--text-secondary);
}

.pub-legend img {
  border-radius: 2px;
}

/* Publication list items */
li {
  color: var(--text-secondary) !important;
  line-height: 1.75;
  margin-bottom: 0.3em;
}

li a {
  color: var(--accent) !important;
}

/* Year headers in publications */
section h3 {
  color: var(--text) !important;
  margin-top: 2em;
  padding-bottom: 0.3em;
  border-bottom: 1px solid var(--border);
}

/* Sub-category labels */
section i b {
  color: var(--text-muted) !important;
  font-weight: 600 !important;
}

/* ---- Team Page ---- */
.team-hero {
  width: 100%;
  max-height: 350px;
  object-fit: cover;
  border-radius: var(--radius);
  margin-bottom: 2em;
  box-shadow: var(--shadow-md);
}

/* Team member cards */
.card {
  width: 130px !important;
  height: 160px !important;
  position: relative !important;
  display: inline-block !important;
  border-radius: var(--radius) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-sm) !important;
  transition: box-shadow var(--transition), transform var(--transition) !important;
}

.card:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-2px) !important;
}

#dissertations .card {
  width: 65px !important;
  height: 80px !important;
}

.card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: var(--radius) !important;
}

.card .img-top {
  display: none !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 99 !important;
  width: 100% !important;
  height: 100% !important;
}

.card:hover .img-top {
  display: inline !important;
}

/* Team rows */
.row {
  margin-bottom: 1.5em;
  padding-bottom: 1.5em;
  border-bottom: 1px solid var(--border);
}

.row:last-child {
  border-bottom: none;
}

/* Team member names */
.row h3 {
  border-bottom: none !important;
  margin-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Alumni section */
.alumni-grid {
  columns: 2;
  column-gap: 2em;
}

@media screen and (max-width: 736px) {
  .alumni-grid {
    columns: 1;
  }
}

/* ---- Photo Gallery ---- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.2em;
  margin-top: 1em;
}

div.gallery {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-sm) !important;
  transition: box-shadow var(--transition), transform var(--transition) !important;
}

div.gallery:hover {
  border-color: var(--border-strong) !important;
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-3px) !important;
}

div.gallery img {
  width: 100% !important;
  height: 200px !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.4s ease !important;
}

div.gallery:hover img {
  transform: scale(1.03) !important;
}

div.gallery a {
  display: block;
  overflow: hidden;
  border-bottom: none !important;
}

div.desc {
  padding: 0.8em 1em !important;
  text-align: left !important;
  font-size: 0.88em !important;
  color: var(--text-secondary) !important;
  font-weight: 500 !important;
  border-top: 1px solid var(--border);
}

/* Override old float-based gallery layout */
.responsive {
  float: none !important;
  width: 100% !important;
  padding: 0 !important;
}

/* ---- Join Page ---- */
.join-images {
  display: flex;
  gap: 0.5em;
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 2em;
  box-shadow: var(--shadow-md);
}

.join-images img {
  flex: 1;
  min-width: 0;
  height: 220px;
  object-fit: cover;
}

@media screen and (max-width: 736px) {
  .join-images {
    flex-wrap: wrap;
  }
  .join-images img {
    flex: 1 1 45%;
    height: 150px;
  }
}

/* ---- Lists ---- */
ul {
  list-style: disc !important;
  padding-left: 1.5em !important;
}

ul li {
  padding: 0.2em 0;
}

section > ul {
  list-style: none !important;
  padding-left: 0 !important;
}

/* ---- Home Nav Links ---- */
#nav-links {
  margin-top: 2.5em;
  text-align: center;
}

#nav-links ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75em;
}

#nav-links ul li {
  margin: 0 !important;
  padding: 0 !important;
}

#nav-links ul li a.button {
  border-bottom: none !important;
}

/* ---- Buttons ---- */
.button, button, input[type="submit"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--accent) !important;
  color: #fff !important;
  font-family: var(--body-font) !important;
  font-size: 0.9em !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-align: center !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: var(--radius) !important;
  padding: 0.7em 1.8em !important;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition) !important;
}

.button:hover, button:hover, input[type="submit"]:hover {
  background: var(--accent-hover) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

/* ---- Animations ---- */
/* Kept intentionally minimal to avoid page-load flicker */

/* Wind animation for nav buttons — all share one pattern, slight offsets per button */
/* Keyframe positions cluster around gusts to create natural acceleration/deceleration */
@keyframes wind {
  0%   { transform: rotate(0deg)    translateX(0px); }
  /* Gust from left → lean right */
  10%  { transform: rotate(1deg)    translateX(2.5px); }
  20%  { transform: rotate(2.5deg)  translateX(6.5px); }
  30%  { transform: rotate(1.8deg)  translateX(4px); }
  /* Calm */
  44%  { transform: rotate(0.2deg)  translateX(0.5px); }
  50%  { transform: rotate(0deg)    translateX(0px); }
  /* Gust from right → lean left */
  60%  { transform: rotate(-0.8deg) translateX(-2.5px); }
  70%  { transform: rotate(-2.3deg) translateX(-6px); }
  79%  { transform: rotate(-1.5deg) translateX(-3.5px); }
  /* Settle, hint of next right gust */
  90%  { transform: rotate(-0.2deg) translateX(-0.5px); }
  96%  { transform: rotate(0.7deg)  translateX(1.8px); }
  100% { transform: rotate(0deg)    translateX(0px); }
}

/* 3-second initial pause, then staggered starts so buttons feel like separate objects */
#nav-links ul li:nth-child(1) a.button {
  animation: wind 16s linear infinite;
  animation-delay: 3s;
}
#nav-links ul li:nth-child(2) a.button {
  animation: wind 16.8s linear infinite;
  animation-delay: 2.6s;
}
#nav-links ul li:nth-child(3) a.button {
  animation: wind 15.6s linear infinite;
  animation-delay: 2.3s;
}
#nav-links ul li:nth-child(4) a.button {
  animation: wind 17.2s linear infinite;
  animation-delay: 2.75s;
}
#nav-links ul li:nth-child(5) a.button {
  animation: wind 16.3s linear infinite;
  animation-delay: 2.45s;
}

/* ---- Responsive Adjustments ---- */

/* Sidebar overlay: let main.css handle height/position at all breakpoints */

@media screen and (max-width: 1280px) {
  body {
    font-size: 14px !important;
  }
}

@media screen and (max-width: 980px) {
  #banner {
    flex-direction: column;
    text-align: center;
    gap: 1.5em;
  }
  #banner .content header h1 {
    font-size: 2em !important;
  }
  section > header.main h1::after {
    left: 50%;
    transform: translateX(-50%);
  }
}

@media screen and (max-width: 736px) {
  body {
    font-size: 13px !important;
  }
  .card {
    width: 100px !important;
    height: 130px !important;
  }
  div.gallery img {
    height: 160px !important;
  }
  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.8em;
  }
}

/* ---- Scrollbar Styling ---- */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg);
}

::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* ---- Selection ---- */
::selection {
  background: var(--accent-light);
  color: var(--text);
}

/* ---- Toggle body hover — reveal background image ---- */
/* When hovering the toggle body, fade the text highlight to nearly transparent */
.toggle-body:hover p.img-text {
  background-color: rgba(255, 255, 255, 0.08) !important;
}

/* ---- Print ---- */
@media print {
  #sidebar { display: none !important; }
  body::before { display: none; }
  #main { width: 100% !important; margin: 0 !important; }
}