@import url("/css/brand-tokens.css");

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--sc-font-sans);
  color: #111827;
  line-height: 1.6;
  background: #f9fafb;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.container { max-width: 1280px; margin: 0 auto; padding: 0 1rem; width: 100%; }
@media (min-width: 640px)  { .container { padding: 0 1.5rem; } .nav-row, .mobile-menu { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px) { .container { padding: 0 2rem; }   .nav-row, .mobile-menu { padding-left: 2rem; padding-right: 2rem; } }
main.container { flex: 1; }

.edit-link {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 100;
  background: var(--sc-gold);
  color: var(--sc-navy);
  font-weight: 600;
  font-size: .85rem;
  text-decoration: none;
  padding: .5rem 1rem;
  border-radius: 9999px;
  box-shadow: 0 4px 10px rgb(0 0 0 / 0.2);
}
.edit-link:hover { background: var(--sc-yellow); color: var(--sc-navy); }

/* Header — visually matches the members.etaiota.org NavBar */
.site-header {
  background: var(--sc-navy);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}
.site-header nav { max-width: 1280px; margin: 0 auto; display: block; }

.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  height: 4rem; /* fixed, not padding-derived -- matches member-directory's h-16 exactly regardless of content */
  padding: 0 1rem;
}
.site-header .brand { display: flex; align-items: center; flex-shrink: 0; }
.site-header .brand img { height: 48px; width: auto; display: block; }

/* Desktop link row -- hidden below the nav-toggle breakpoint; .mobile-menu
   (a separate, hamburger-toggled block below) takes over instead. Kept as
   two blocks rather than one that reflows, since the desktop version is a
   horizontal bar with flyout dropdowns and the mobile version is a
   vertical accordion -- different enough layouts that trying to force one
   markup structure to serve both isn't worth the CSS contortion. */
.nav-primary {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: .25rem;
  align-items: center;
  flex: 1;
  flex-wrap: wrap;
}
.nav-primary > li { display: flex; }

.site-header a.nav-link,
.site-header .nav-summary {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  color: #fff;
  text-decoration: none;
  font-size: .875rem;
  font-weight: 500;
  padding: .5rem .75rem;
  border-radius: .375rem;
  cursor: pointer;
  list-style: none;
}
.nav-summary::-webkit-details-marker { display: none; }
.site-header a.nav-link:hover,
.site-header .nav-summary:hover { background: var(--sc-nav-hover); }
.site-header a.nav-link.active,
.site-header .nav-summary.active { background: var(--sc-nav-active); }

.nav-caret { flex-shrink: 0; transition: transform .15s ease; }
details[open] > .nav-summary .nav-caret { transform: rotate(180deg); }

/* Sub-page panel -- built on native <details>/<summary> (click/tap to
   open, native keyboard support) rather than :hover, since a hover-only
   dropdown has a dead zone the moment there's any gap between the trigger
   and the panel: moving the mouse from one to the other crosses space
   that's over neither element, hover ends, and the menu closes before you
   can reach it. Closing on an outside click is handled in base.njk's
   inline script, since <details> doesn't do that natively either. */
.nav-panel { list-style: none; margin: 0; padding: 0; }
.nav-panel-link {
  display: block;
  padding: .5rem .625rem;
  border-radius: .375rem;
  font-size: .875rem;
  font-weight: 500;
  color: var(--sc-navy);
  text-decoration: none;
}
.nav-panel-link:hover { background: #f3f4f6; }
.nav-panel-link.current { background: #eef2ff; color: var(--sc-navy); font-weight: 700; }
/* The "Sign out" entry in the header's account dropdown is a <button>
   (it runs JS, not a navigation), reset to look like its sibling links. */
button.nav-panel-link {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  font: inherit;
  cursor: pointer;
}
.nav-panel-group {
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--sc-text-muted);
  padding: .5rem .625rem .15rem;
}
.nav-panel-sub { padding-left: 1.25rem; }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;  /* p-2 (.5rem padding) + 1.5rem icon, both sides -- matches member-directory exactly */
  height: 2.5rem;
  padding: .5rem;
  border-radius: .375rem;
  border: none;
  background: none; /* transparent at rest -- only shows on hover, like member-directory's */
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
}
.nav-toggle:hover { background: var(--sc-nav-hover); }

/* Values below are pulled directly from member-directory's NavBarAlt.vue
   (pt-2 pb-3 space-y-1, no container-level left/right padding -- each
   item supplies its own px-3) so the two properties' mobile menus don't
   visibly shift when a member moves between them. */
.mobile-menu {
  display: none;
  flex-direction: column;
  gap: .25rem;
  padding: .5rem 0 .75rem;
}
.mobile-menu.open { display: flex; }
.mobile-menu a.nav-link,
.mobile-menu .nav-summary {
  padding: .5rem .75rem;
  font-size: 1rem;
}
/* .nav-summary is inline-flex (content-sized) by default -- fine on
   desktop, where it sits inline among other nav-primary items, but on
   mobile that leaves only the text+caret hoverable/tappable instead of
   the full row. .nav-link's plain <a> siblings don't have this problem:
   as direct children of .mobile-menu (display:flex), they already
   stretch to fill its width for free -- .nav-summary doesn't, because
   the flex item is actually its <details> parent, not the <summary>
   itself. Matches member-directory's "flex w-full justify-between"
   dropdown-trigger buttons exactly: full-row hit target, caret pinned
   to the right edge instead of hugging the text. */
.mobile-menu .nav-summary {
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.mobile-menu .nav-panel {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding-left: 1.5rem; /* pl-6 accordion indent */
}
.mobile-menu .nav-panel-link {
  color: #fff;
  font-size: .875rem;
  font-weight: 400; /* no font-medium on these in the reference */
  padding: .5rem .75rem;
}
.mobile-menu .nav-panel-link:hover { background: rgba(255, 255, 255, .08); }
.mobile-menu .nav-panel-link.current { background: rgba(255, 255, 255, .14); color: #fff; }
.mobile-menu .nav-panel-group { color: #c9cfe6; }
/* The signed-in account section (email + My Profile/Admin/Sign Out) is
   visually bigger/bolder than the House Corp / Member Directory
   sub-items above, and set off by a divider -- matches the reference's
   "border-t border-blue-700 pt-2 mt-2" wrapper exactly. */
#auth-nav-item-mobile {
  border-top: 1px solid var(--sc-nav-hover);
  padding-top: .5rem;
  margin-top: .5rem;
}
#auth-nav-item-mobile .nav-summary { font-size: 1rem; }
#auth-nav-item-mobile .nav-panel { padding-left: 0; }
#auth-nav-item-mobile .nav-panel-link {
  font-size: 1rem;
  font-weight: 500;
}

/* Sign-in entry point / signed-in account menu -- lives outside
   .nav-primary so it sits flush right of the primary links (.nav-primary's
   own flex: 1 consumes the leftover row width, pushing this sibling to
   the far right edge), matching member-directory's NavBar layout. Hidden
   below the desktop breakpoint -- .mobile-menu's own
   #auth-nav-item-mobile covers the same job there. */
.auth-nav-item { display: none; }
/* Slightly muted, regular (not medium) weight vs. the full-white,
   font-medium primary nav links -- matches member-directory's
   NavBarAlt.vue account-menu trigger exactly (text-gray-300, no
   font-medium class, vs. text-white font-medium on the others). */
.site-header .nav-summary.account-menu-trigger { color: #d1d5db; font-weight: 400; }
.site-header .nav-summary.account-menu-trigger:hover { color: #fff; }

@media (min-width: 860px) {
  .nav-primary { display: flex; }
  .auth-nav-item { display: flex; align-items: center; }
  .nav-toggle { display: none; }
  .mobile-menu { display: none !important; }
  .nav-dropdown { position: relative; }
  .nav-panel {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 12rem;
    margin-top: .25rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: .5rem;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    padding: .375rem;
    z-index: 20;
  }
  /* The account menu is the rightmost item -- its panel opens leftward
     from the right edge instead of the left edge the others use, so it
     can't overflow past the viewport; also a touch narrower, matching
     member-directory's account panel (min-w-10rem vs 12rem elsewhere). */
  .auth-nav-item .nav-panel {
    left: auto;
    right: 0;
    min-width: 10rem;
  }
}

h1, h2, h3 { line-height: 1.25; font-weight: 700; }
h1 { margin-top: 1.5rem; color: var(--sc-navy); }
a { color: var(--sc-sky); }
a:hover { color: var(--sc-navy); }

blockquote {
  margin: 1.25rem 0;
  padding: .75rem 1.25rem;
  border-left: 4px solid var(--sc-sky);
  background: #f4f8fb;
  border-radius: 0 .375rem .375rem 0;
  font-style: italic;
  color: #374151;
}
blockquote p { margin: .5rem 0; }
blockquote p:first-child { margin-top: 0; }
blockquote p:last-child { margin-bottom: 0; }

.post-meta { color: var(--sc-text-muted); font-size: .9rem; }
.post .tag-list { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0 1.25rem; }

/* Homepage banner -- Decap-selected image, placed above or below the nav
   via base.njk (above) / index.njk (below), per the homepage's own
   banner_position field. */
.homepage-banner { display: block; width: 100%; height: auto; }

/* Homepage two-column layout: main content (News) + sidebar (widgets) */
.homepage-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  margin: 1rem 0 2rem;
}
@media (min-width: 900px) {
  .homepage-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); align-items: start; }
}
.homepage-main h1 { margin-top: 0; }

.homepage-sidebar { display: flex; flex-direction: column; gap: 1.25rem; }
.sidebar-block.sidebar-card,
.sidebar-block.sidebar-copy {
  background: #fff;
  border: 1px solid var(--sc-border);
  border-radius: .75rem;
  padding: 1.25rem;
  box-shadow: 0 2px 10px rgb(13 36 64 / 0.05);
}
.sidebar-block h2 { margin-top: 0; font-size: 1.15rem; }
.sidebar-block h3, .sidebar-block h4 { margin-top: 1rem; }
.sidebar-block h3:first-child, .sidebar-block h4:first-child { margin-top: 0; }
.sidebar-block ul { padding-left: 1.1rem; margin: .4rem 0; }
.sidebar-block > *:first-child { margin-top: 0; }
.sidebar-block > *:last-child { margin-bottom: 0; }
.bday-list li, .anniv-list li, .lost-members-list li { margin: .25rem 0; }

/* Sigma Chi symbolizes a departed brother with a white rose -- shown as a
   small icon instead of spelling out "All honor to his name" inline (the
   phrase is kept as the icon's title/aria-label for screen readers and
   hover). */
.deceased-rose {
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-left: .3em;
  vertical-align: -2px;
  background-color: var(--sc-text-muted);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M429.55 119.49a16 16 0 0 0-17.06-7.1c-18.64 4.19-37.06 9-54.73 14.22c-35.06 10.39-69.33 23.92-107.85 42.59c-18.62 9.05-26 13.35-48 26.13l-4.5 2.67c-32.95 19-57.09 40-73.79 64.29C105.29 288.89 96 320 96 354.64c0 40.74 15.71 77.1 44.24 102.37C169 482.52 209.06 496 256 496c46.76 0 86.89-14.33 116-41.43c28.35-26.35 44-63.39 44-104.29c0-25-6.19-47-12.17-68.22c-12.59-44.69-23.46-83.29 24.71-144.13a16 16 0 0 0 1.01-18.44m-210.55.06C168.46 92.08 101.46 80.69 98.63 80.22A16 16 0 0 0 81 90.55a16.47 16.47 0 0 0 3.79 16.84c31.84 33.78 32.86 68.79 28.65 104.63a4.45 4.45 0 0 0 2.5 4.54a4.44 4.44 0 0 0 5.08-.9c16.39-16.51 36.37-31.52 60.4-45.39l4.48-2.6C208 154.8 216.23 150 236 140.41l2.69-1.3a4 4 0 0 0 .64-6.83A179 179 0 0 0 219 119.55m15.26-28.1c3.44 1.87 7.09 4 10.9 6.29a189.3 189.3 0 0 1 29.57 22.39a4 4 0 0 0 4.28.76a672 672 0 0 1 69.65-25q7-2.07 14.08-4a4 4 0 0 0 2.53-5.62c-8.27-16.83-14.67-28.9-15.15-29.79A16 16 0 0 0 336 48c-1.91 0-33.28.36-76.87 21.3a279 279 0 0 0-26.39 14.51a4 4 0 0 0 .22 6.94Zm-24.93-30.66c7.3-4.77 14.74-9.22 22.25-13.31a2 2 0 0 0 .24-3.36c-26-19.57-49.73-27-51.15-27.42a16 16 0 0 0-17.56 5.82a217.6 217.6 0 0 0-19.28 32.38a2 2 0 0 0 1.29 2.81c13.61 3.57 29.4 8.29 45.61 14.29a2 2 0 0 0 1.79-.2Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M429.55 119.49a16 16 0 0 0-17.06-7.1c-18.64 4.19-37.06 9-54.73 14.22c-35.06 10.39-69.33 23.92-107.85 42.59c-18.62 9.05-26 13.35-48 26.13l-4.5 2.67c-32.95 19-57.09 40-73.79 64.29C105.29 288.89 96 320 96 354.64c0 40.74 15.71 77.1 44.24 102.37C169 482.52 209.06 496 256 496c46.76 0 86.89-14.33 116-41.43c28.35-26.35 44-63.39 44-104.29c0-25-6.19-47-12.17-68.22c-12.59-44.69-23.46-83.29 24.71-144.13a16 16 0 0 0 1.01-18.44m-210.55.06C168.46 92.08 101.46 80.69 98.63 80.22A16 16 0 0 0 81 90.55a16.47 16.47 0 0 0 3.79 16.84c31.84 33.78 32.86 68.79 28.65 104.63a4.45 4.45 0 0 0 2.5 4.54a4.44 4.44 0 0 0 5.08-.9c16.39-16.51 36.37-31.52 60.4-45.39l4.48-2.6C208 154.8 216.23 150 236 140.41l2.69-1.3a4 4 0 0 0 .64-6.83A179 179 0 0 0 219 119.55m15.26-28.1c3.44 1.87 7.09 4 10.9 6.29a189.3 189.3 0 0 1 29.57 22.39a4 4 0 0 0 4.28.76a672 672 0 0 1 69.65-25q7-2.07 14.08-4a4 4 0 0 0 2.53-5.62c-8.27-16.83-14.67-28.9-15.15-29.79A16 16 0 0 0 336 48c-1.91 0-33.28.36-76.87 21.3a279 279 0 0 0-26.39 14.51a4 4 0 0 0 .22 6.94Zm-24.93-30.66c7.3-4.77 14.74-9.22 22.25-13.31a2 2 0 0 0 .24-3.36c-26-19.57-49.73-27-51.15-27.42a16 16 0 0 0-17.56 5.82a217.6 217.6 0 0 0-19.28 32.38a2 2 0 0 0 1.29 2.81c13.61 3.57 29.4 8.29 45.61 14.29a2 2 0 0 0 1.79-.2Z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
}

/* Small profile-icon cue after a linked name in the Birthdays/Anniversaries
   widget -- the link (styled sitewide via the a[href*="members.etaiota.org
   /members/"] rule below) already reads as clickable, but this makes it
   clear at a glance the link goes to a profile page, not an email/message
   action. */
.bday-list a[href*="members.etaiota.org/members/"]::after,
.anniv-list a[href*="members.etaiota.org/members/"]::after {
  content: "";
  display: inline-block;
  width: 11px;
  height: 13px;
  margin-left: .35em;
  vertical-align: -1px;
  background-color: currentColor;
  opacity: .55;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512l388.6 0c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304l-91.4 0z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512l388.6 0c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304l-91.4 0z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
}

/* Social links (homepage sidebar "Stay Connected" block): auto-detect
   facebook.com / instagram.com links and add a brand-colored icon badge,
   so editors just paste a plain [label](url) link in the CMS -- no
   per-link markup needed. */
.sidebar-copy a[href*="facebook.com"],
.sidebar-copy a[href*="instagram.com"] {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .5rem 0;
  color: var(--sc-text);
  text-decoration: none;
  border-bottom: 1px solid var(--sc-border);
}
.sidebar-copy a[href*="facebook.com"]:last-child,
.sidebar-copy a[href*="instagram.com"]:last-child { border-bottom: none; }
.sidebar-copy a[href*="facebook.com"]:hover,
.sidebar-copy a[href*="instagram.com"]:hover { color: var(--sc-sky); }

.sidebar-copy a[href*="facebook.com"]::before,
.sidebar-copy a[href*="instagram.com"]::before {
  content: "";
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center;
}
.sidebar-copy a[href*="facebook.com"]::before {
  background-color: #1877F2;
  background-size: 11px 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512' fill='white'%3E%3Cpath d='M80 299.3V512H196V299.3h86.5l18-97.8H196V166.9c0-51.7 20.3-71.5 72.7-71.5c16.3 0 29.4 .4 37 1.2V7.9C291.4 4 256.4 0 236.2 0C129.3 0 80 50.5 80 159.4v42.1H14v97.8H80z'/%3E%3C/svg%3E");
}
.sidebar-copy a[href*="instagram.com"]::before {
  background-size: 17px 17px, cover;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077'/%3E%3C/svg%3E"),
    linear-gradient(45deg, #f09433, #e6683c, #cc2366, #bc1888);
}

/* House Corporation page -- officer grid (left column, hc_officers) */
.officer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
  margin: 1rem 0 2rem;
}
.officer-card {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .875rem;
  background: #fff;
  border: 1px solid var(--sc-border);
  border-radius: .625rem;
  text-decoration: none;
  box-shadow: 0 2px 10px rgb(13 36 64 / 0.05);
}
.officer-card:hover { border-color: var(--sc-sky); }
.officer-photo {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.officer-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sc-navy);
  color: #fff;
  font-weight: 700;
  font-size: .9rem;
}
.officer-role { font-size: .8rem; color: var(--sc-text-muted); }
.officer-term { font-weight: 400; }
.officer-name { font-weight: 700; color: var(--sc-navy); }

/* House Corporation page -- local officer contact cards (ug_officers) */
.house-corp-local { margin: 2.5rem 0 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--sc-border); }
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
  margin: 1rem 0 1.5rem;
}
.contact-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.25rem 1rem;
  background: #fff;
  border: 1px solid var(--sc-border);
  border-radius: .625rem;
  box-shadow: 0 2px 10px rgb(13 36 64 / 0.05);
}
.contact-card-link { display: flex; flex-direction: column; align-items: center; text-decoration: none; }
.contact-card-link:hover .contact-name { color: var(--sc-sky); }
.contact-photo {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: .625rem;
}
.contact-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sc-navy);
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
}
.contact-role { font-size: .75rem; color: var(--sc-text-muted); text-transform: uppercase; letter-spacing: .03em; }
.contact-name { font-weight: 700; color: var(--sc-navy); margin-top: .15rem; }
.contact-phone { display: block; margin-top: .5rem; font-size: .85rem; }

/* Tenant Resources page */
.quick-nav {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 1.25rem 0 1.5rem;
}
.quick-nav a {
  font-size: .8rem;
  font-weight: 600;
  color: var(--sc-navy);
  text-decoration: none;
  padding: .4rem .75rem;
  border: 1px solid var(--sc-border);
  border-radius: 9999px;
}
.quick-nav a:hover { background: #f3f4f6; }

.tenant-form-card {
  background: #fff;
  border: 1px solid var(--sc-border);
  border-radius: .75rem;
  padding: 1.25rem 1.5rem;
  margin: 1rem 0;
  box-shadow: 0 2px 10px rgb(13 36 64 / 0.05);
}
.tenant-form-card h3 { margin-top: 0; }
.tenant-form-card ul { padding-left: 1.1rem; }

.form-group { margin: 1rem 0; }
.form-group label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .3rem; }
.form-group .required { color: #b91c1c; }
.form-group small { display: block; color: var(--sc-text-muted); font-size: .8rem; margin-bottom: .3rem; }
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  max-width: 28rem;
  font: inherit;
  font-size: .9rem;
  padding: .55rem .7rem;
  border: 1px solid var(--sc-border);
  border-radius: .4375rem;
  background: #fafbfc;
  color: #111827;
}
.form-group textarea { max-width: 100%; resize: vertical; }
.form-success {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #065f46;
  border-radius: .5rem;
  padding: .875rem 1rem;
  margin: 1rem 0;
}
.form-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
  border-radius: .5rem;
  padding: .875rem 1rem;
  margin: 1rem 0;
}
.auth-form { max-width: 28rem; }

/* News index */
.page-head { display: flex; align-items: baseline; justify-content: space-between; }
.feed-link { font-size: .85rem; }
.news-subtitle { margin: -.5rem 0 0; color: var(--sc-text-muted); font-size: .95rem; }

/* Search + filter toolbar */
.news-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: .625rem;
  margin: 1.25rem 0 .75rem;
  padding: .875rem;
  background: #fff;
  border: 1px solid var(--sc-border);
  border-radius: .75rem;
  box-shadow: 0 2px 10px rgb(13 36 64 / 0.05);
}
.news-search {
  flex: 1 1 200px;
  min-width: 160px;
  display: flex;
  align-items: center;
  gap: .5rem;
  border: 1px solid var(--sc-border);
  border-radius: .5rem;
  padding: 0 .75rem;
  background: #fafbfc;
}
.news-search svg { flex-shrink: 0; color: #8a93a3; }
.news-search input {
  flex: 1;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: .875rem;
  padding: .55rem 0;
  color: #111827;
  min-width: 0;
}
.news-search input:focus { outline: none; }
.news-toolbar select {
  font: inherit;
  font-size: .875rem;
  padding: .55rem .75rem;
  border: 1px solid var(--sc-border);
  border-radius: .5rem;
  background: #fafbfc;
  color: #3a4152;
}

/* Result count + sort row */
.news-summary {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: space-between;
  align-items: center;
  margin: 0 .125rem .5rem;
  font-size: .875rem;
  color: var(--sc-text-muted);
}
.news-sort { display: flex; align-items: center; gap: .5rem; }
.news-sort select {
  font: inherit;
  font-size: .85rem;
  padding: .4rem .65rem;
  border: 1px solid var(--sc-border);
  border-radius: .5rem;
  background: #fafbfc;
  color: #3a4152;
}

/* Dense article list */
.news-list { display: flex; flex-direction: column; }
.post-row {
  display: flex;
  align-items: center;
  gap: .875rem;
  border-bottom: 1px solid #edf0f4;
  padding: .75rem .125rem;
}
.post-row:hover { background: #fafbfc; }
.post-row-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: .5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sc-text-muted);
}
.post-row-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem .625rem;
}
.post-row h2 {
  margin: 0;
  font-size: .97rem;
  font-weight: 700;
  line-height: 1.35;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.post-row h2 a { text-decoration: none; color: var(--sc-navy); }
.post-row h2 a:hover { color: var(--sc-sky); }
.post-row-author {
  flex-shrink: 0;
  width: 150px;
  font-size: .85rem;
  color: var(--sc-text-muted);
}
.post-row-date {
  flex-shrink: 0;
  width: 100px;
  text-align: right;
  font-size: .85rem;
  color: var(--sc-text-muted);
}

.tag-pill {
  display: inline-block;
  font-size: .75rem;
  font-weight: 600;
  padding: .15rem .55rem;
  border-radius: 9999px;
  white-space: nowrap;
  background: #eef0f3;
  color: var(--sc-text-muted);
}
.tag-pill--more { font-size: .7rem; }

/* Taxonomy category colors -- pastel background / saturated foreground pairs,
   also used as the solid background on .post-row-icon for that tag. Kept in
   sync with the closed taxonomy in docs/tags-and-writing-guide.md. */
.tag-pill--treasurer-reports { background: #dcefdc; color: #2e6b3e; }
.tag-pill--president-updates { background: #e4ebf5; color: #33507a; }
.tag-pill--meeting-minutes { background: #e6e9ee; color: #445066; }
.tag-pill--house-corporation { background: #f7ecd2; color: #8a6d1f; }
.tag-pill--house-renovations { background: #f8e3d6; color: #9a4f1f; }
.tag-pill--alumni-news { background: #dcf0f1; color: #2c6e73; }
.tag-pill--in-memoriam { background: #f5dfe2; color: #8a3b46; }
.tag-pill--1855-club { background: #ece3f5; color: #5b3b8a; }
.tag-pill--undergraduate-chapter { background: #d9f0f5; color: #1f6e80; }
.tag-pill--etaiota-org-site-features { background: #e4e7ea; color: #4a5560; }

/* "Members Only" indicator -- shown to every visitor, signed in or not, so
   people can see which posts are locked before a real sign-in gate exists.
   Same light-pastel weight as the taxonomy tag-pills (not a solid fill) so
   it reads as a peer of those pills, not an alarm -- the lock icon plus a
   cooler, slightly muted tone is enough to set it apart from a topic tag. */
.lock-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .75rem;
  font-weight: 600;
  white-space: nowrap;
  background: #dde3ee;
  color: #33507a;
  padding: .15rem .55rem;
  border-radius: 9999px;
  vertical-align: middle;
}
.lock-badge svg { flex-shrink: 0; opacity: .85; }
.post h1 .lock-badge { margin-left: .5rem; }

.members-only-notice {
  background: #f4f6f8;
  border: 1px solid var(--sc-border);
  border-left: 4px solid var(--sc-navy);
  border-radius: .375rem;
  padding: 1rem 1.25rem;
  margin: 1rem 0;
  color: var(--sc-text);
}
.members-only-notice p { margin: 0; }

/* Shown only while the sign-in check / content fetch is still in
   flight -- neutral on purpose, so it doesn't read as "you're locked
   out" for the split second before a signed-in member's real content
   arrives. See post.njk. */
.protected-article-loading {
  display: flex;
  align-items: center;
  gap: .6rem;
  background: #f4f6f8;
  border: 1px solid var(--sc-border);
  border-radius: .375rem;
  padding: 1rem 1.25rem;
  margin: 1rem 0;
  color: var(--sc-text-muted);
}
.protected-article-loading p { margin: 0; }
.protected-article-loading .spinner {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  border: 2px solid var(--sc-border);
  border-top-color: var(--sc-sky);
  border-radius: 50%;
  animation: protected-article-spin .7s linear infinite;
}
@keyframes protected-article-spin { to { transform: rotate(360deg); } }

.post-row-icon.tag-pill--treasurer-reports { background: #2e6b3e; }
.post-row-icon.tag-pill--president-updates { background: #33507a; }
.post-row-icon.tag-pill--meeting-minutes { background: #445066; }
.post-row-icon.tag-pill--house-corporation { background: #8a6d1f; }
.post-row-icon.tag-pill--house-renovations { background: #9a4f1f; }
.post-row-icon.tag-pill--alumni-news { background: #2c6e73; }
.post-row-icon.tag-pill--in-memoriam { background: #8a3b46; }
.post-row-icon.tag-pill--1855-club { background: #5b3b8a; }
.post-row-icon.tag-pill--undergraduate-chapter { background: #1f6e80; }
.post-row-icon.tag-pill--etaiota-org-site-features { background: #4a5560; }

.news-empty { padding: 2rem 0; text-align: center; }

/* Pagination (desktop) / Load more (mobile) */
.news-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .375rem;
  padding: 1.25rem 0;
}
.news-pagination button {
  font: inherit;
  font-size: .85rem;
  border: 0;
  background: none;
  color: #3a4152;
  padding: .5rem .7rem;
  border-radius: .4375rem;
  cursor: pointer;
}
.news-pagination button:hover:not(:disabled) { background: #eef0f3; }
.news-pagination button:disabled { color: #9aa2b1; cursor: default; }
.news-pagination button.current {
  background: var(--sc-navy);
  color: #fff;
  font-weight: 700;
}
.news-pagination .ellipsis { color: #9aa2b1; padding: .5rem .3rem; }

.news-load-more {
  display: none;
  width: 100%;
  margin: 1rem 0 1.5rem;
  padding: .75rem;
  font: inherit;
  font-size: .875rem;
  font-weight: 700;
  text-align: center;
  color: var(--sc-navy);
  background: #fafbfc;
  border: 1px solid var(--sc-border);
  border-radius: .625rem;
  cursor: pointer;
}
.news-load-more:hover { background: #f3f4f6; }

@media (max-width: 640px) {
  .post-row { align-items: flex-start; }
  .post-row-icon { width: 32px; height: 32px; }
  .post-row-main { flex-direction: column; align-items: flex-start; gap: .3rem; }
  .post-row h2 { white-space: normal; overflow: visible; text-overflow: clip; }
  .post-row-author,
  .post-row-date {
    width: auto;
    text-align: left;
    display: inline;
    font-size: .75rem;
    color: #8a93a3;
  }
  .post-row-author::after { content: " \00b7 "; }
  .news-pagination { display: none; }
  .news-load-more { display: block; }
  .news-load-more.is-hidden { display: none; }
}
.post img, .post-image { max-width: 100%; height: auto; border-radius: 4px; }

/* CTA button -- inserted via the {% button %} shortcode / Decap's Button component */
.btn-cta {
  display: inline-block;
  background: var(--sc-navy);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  padding: .65rem 1.5rem;
  border-radius: .375rem;
  margin: .5rem 0;
  transition: background-color .15s ease;
}
.btn-cta:hover { background: var(--sc-sky); color: #fff; }

/* Member profile link -- inserted via {% memberlink %} shortcode / Decap's
   Member Link component (always its own paragraph -- see admin/index.html's
   memberlink comment), OR a plain markdown link typed/inserted via Decap's
   native Link tool pointed at a members.etaiota.org profile URL (the
   recommended way to link a name *inline*, mid-sentence). The attribute
   selector picks up the second case automatically so both look identical
   regardless of which way an editor made the link. */
.member-link,
a[href*="members.etaiota.org/members/"] {
  font-weight: 600;
  color: var(--sc-sky);
  text-decoration: none;
  border-bottom: 1px dotted var(--sc-sky);
}
.member-link:hover,
a[href*="members.etaiota.org/members/"]:hover { color: var(--sc-navy); border-bottom-color: var(--sc-navy); }

/* News article link -- inserted via {% newslink %} shortcode / Decap's News Article Link component */
.news-link {
  font-weight: 600;
  color: var(--sc-navy);
  text-decoration: none;
  border-bottom: 1px solid var(--sc-border);
}
.news-link::after { content: " \2192"; }
.news-link:hover { color: var(--sc-sky); border-bottom-color: var(--sc-sky); }

/* Inline attachment viewer (PDF) */
.attachment { margin: 1.5rem 0; }
.attachment object {
  width: 100%;
  height: 680px;
  border: 1px solid var(--sc-border);
  border-radius: .375rem;
  background: #fff;
}
.attachment-download { margin: .5rem 0 0; font-size: .9rem; }

/* Utility */
.mt-3 { margin-top: 1rem; }

/* Reorderable/resizable page-section blocks (Decap "blocks" list widget) --
   shared by 1855 Club, Tenant Resources, and the 1855 Club FAQ. Each
   section picks "full" or "half" width; two adjacent "half" sections sit
   side-by-side because flex-wrap simply lets them share a row when
   there's room -- no explicit row-pairing logic needed. Below the
   min-width breakpoint every section stacks full-width regardless of its
   width setting. */
.section-blocks { display: flex; flex-wrap: wrap; gap: 0 2rem; margin: 1.5rem 0; }
.section-block {
  flex: 1 1 100%;
  margin: 1rem 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--sc-border);
}
.section-block--first { border-top: none; padding-top: 0; }
.section-block h2 { margin-top: 0; }
@media (min-width: 760px) {
  .section-block--half { flex: 1 1 calc(50% - 1rem); }
}

.giving-table-wrap { max-width: 30rem; margin: 1rem 0; }
.giving-table-wrap-narrow { max-width: 26rem; }
.giving-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--sc-border);
  border-radius: .5rem;
  overflow: hidden;
  box-shadow: 0 2px 10px rgb(13 36 64 / 0.05);
}
.giving-table th, .giving-table td { padding: .5rem .875rem; text-align: right; font-size: .9rem; }
.giving-table th:first-child, .giving-table td:first-child { text-align: left; }
.giving-table thead { background: var(--sc-navy); color: #fff; }
.giving-table tbody tr:nth-child(even) { background: #fafbfc; }
.giving-table tbody tr:not(:last-child) td { border-bottom: 1px solid var(--sc-border); }

.brick-photo {
  max-width: 45%;
  float: right;
  margin: 0 0 .75rem 1.25rem;
  border: 1px solid var(--sc-border);
  border-radius: .5rem;
}
.brick-list {
  clear: both;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--sc-border);
  column-width: 15rem;
  column-gap: 1.5rem;
}
.brick-list ul { margin: 0; padding-left: 1.1rem; }
.brick-list li { margin-bottom: .25rem; break-inside: avoid; }

.giving-forms { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin: 1rem 0; }
@media (min-width: 640px) { .giving-forms { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.giving-form-card {
  background: #fff;
  border: 1px solid var(--sc-border);
  border-radius: .75rem;
  padding: 1.25rem 1.5rem;
  box-shadow: 0 2px 10px rgb(13 36 64 / 0.05);
}
.giving-form-card h3 { margin-top: 0; }
.giving-form-title { font-weight: 700; margin: 0 0 .5rem; }
.giving-form-card .form-group select { max-width: 20rem; }

.giving-method-card {
  background: #fff;
  border: 1px solid var(--sc-border);
  border-radius: .75rem;
  padding: 1.25rem 1.5rem;
  margin: 1.25rem 0;
  box-shadow: 0 2px 10px rgb(13 36 64 / 0.05);
}
.giving-method-card h3 { margin-top: 0; }
.giving-method-card .contact-card { max-width: 220px; margin-top: 1rem; }

/* Footer — matches the directory footer */
.site-footer {
  background: var(--sc-navy);
  color: #fff;
  margin-top: 3rem;
  padding: 1rem 0;
  text-align: center;
  font-size: .875rem;
}
.site-footer .muted { color: #d1d5db; margin-top: .25rem; }
.site-footer p { margin: 0; }