/* ==========================================================================
   ISACA San Diego — design clone
   Layout, spacing, colour and type values reproduced from the original site.
   Images and body copy are placeholders.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Type stacks. The originals are Typekit faces (proxima-nova /
     adobe-garamond-pro); they are listed first so they are used when
     available, followed by the closest freely available stand-ins. */
  --sans: "proxima-nova", "Figtree", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "adobe-garamond-pro", "Crimson Text", Garamond, Georgia, "Times New Roman", serif;

  /* Palette */
  --header-bg: #212121;
  --accent: #27aa9f;          /* buttons, in-copy links */
  --accent-bright: #36b3a8;   /* banner / hero buttons */
  --accent-dark: #00746b;     /* folder-nav section label */
  --body-text: rgba(26, 26, 26, .7);
  --heading-text: rgba(26, 26, 26, .9);
  --h2-text: #4a4a4a;
  --muted-link: rgba(26, 26, 26, .4);
  --rule: rgba(26, 26, 26, .15);
  --card-title: #bdbdbd;
  --card-subtitle: rgba(0, 0, 0, .68);
  --prefooter-bg: #f7f7f7;
  --prefooter-text: #272727;
  --footer-text: rgba(0, 0, 0, .29);
  --field-bg: #fafafa;
  --field-border: #a9a9a9;
  --submit-bg: #1a1a1a;

  /* Metrics */
  --site-max: 1020px;
  --gutter: 17px;             /* half–gutter used by every content block */

  /* Image-card dynamic type: the original scales card text with the width of
     the content column (956px → 0.766×). Reproduced with calc(). */
  --card-w: min(956px, 100vw - 64px);
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: #fff;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6em;
  color: var(--body-text);
  -moz-osx-font-smoothing: auto;
  -webkit-font-smoothing: subpixel-antialiased;
}

img { border: 0; max-width: 100%; }
a { color: inherit; }
button { font: inherit; }

/* --------------------------------------------------------------------------
   3. Placeholders (stand in for the original photography / embeds)
   -------------------------------------------------------------------------- */
.ph {
  position: relative;
  display: block;
  overflow: hidden;
  background: #e6e6e6;
  background-image:
    linear-gradient(135deg, rgba(255, 255, 255, .45) 25%, transparent 25%,
                    transparent 50%, rgba(255, 255, 255, .45) 50%,
                    rgba(255, 255, 255, .45) 75%, transparent 75%, transparent);
  background-size: 22px 22px;
}

.ph::after {
  content: attr(data-label);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  line-height: 1.4;
  text-transform: uppercase;
  text-align: center;
  color: #8d8d8d;
}

.ph--dark {
  background-color: #2f3436;
  background-image:
    linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
                    transparent 50%, rgba(255, 255, 255, .05) 50%,
                    rgba(255, 255, 255, .05) 75%, transparent 75%, transparent);
}
.ph--dark::after { color: rgba(255, 255, 255, .35); }

.ph--logo {
  width: 240px;
  height: 85px;
  background-color: #fff;
  background-image: none;
}
.ph--logo::after { color: #9a9a9a; letter-spacing: 3px; }

/* fills its positioned parent, like Squarespace's "content-fill" images */
.ph--fill { position: absolute; inset: 0; width: 100%; height: 100%; }
.ph--fill::after { align-items: flex-end; justify-content: flex-end; padding: 14px 18px; }

/* Real artwork, where a page carries it. Same geometry as the placeholder it
   replaces, so nothing about the layout changes. */
.media { display: block; width: 100%; height: auto; max-width: 100%; }
.media--fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.media--logo { width: 240px; height: auto; max-height: 100px; }
.media--contain { width: auto; height: auto; max-width: 100%; max-height: 100%; }
/* fixed-ratio box for artwork the original crops rather than letterboxes */
.media-frame { position: relative; display: block; width: 100%; overflow: hidden; }
.ph--contain { width: 100%; height: 100%; }

/* Grid gallery: 180px cells, four to a row, as the original lays them out. */
.sqs-gallery-block-grid { margin: 0 -10px; }
.sqs-gallery-block-grid::after { content: ""; display: table; clear: both; }
.sqs-gallery-block-grid .grid-slide {
  float: left;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 180px;
  height: 180px;
  padding: 10px;
}

/* Video embeds keep the block's own aspect ratio (set inline). */
.video-frame { position: relative; display: block; width: 100%; height: 0; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* --------------------------------------------------------------------------
   4. Site frame
   -------------------------------------------------------------------------- */
#siteWrapper {
  position: relative;
  background-color: #fff;
  overflow-x: hidden;
}

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */
#header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 0 20px;
  z-index: 1000;
  line-height: 1em;
  background-color: transparent;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

.header-inner {
  display: table;
  width: 100%;
  max-width: none;
  margin: auto;
  padding: 20px 0;
}

#logoWrapper {
  display: table-cell;
  vertical-align: middle;
  width: 240px;
}

#logoImage {
  margin: 0;
  font-size: 0;
  max-width: 100%;
  color: rgba(26, 26, 26, .9);
}
#logoImage a { display: block; text-decoration: none; }
#logoImage .ph--logo,
#logoImage .media--logo { max-height: 100px; }

#headerNav {
  display: table-cell;
  vertical-align: middle;
  text-align: right;
}

#mainNavWrapper { position: relative; z-index: 1000; }

#mainNavigation > div {
  display: inline-block;
  vertical-align: middle;
  position: relative;
}

#headerNav nav a,
#headerNav nav .folder-toggle,
#sidecarNav nav a,
#sidecarNav nav .folder-toggle {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 2px;
  line-height: 1em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(255, 255, 255, .9);
  transition: color .1s ease-in-out;
}

#headerNav nav a:hover,
#headerNav nav .folder-toggle:hover,
#headerNav nav .active > a,
#headerNav nav .active > .folder-toggle { color: #fff; }

#mainNavigation > div > a,
#mainNavigation > div > .folder-toggle {
  display: block;
  padding: .75em 1em;
  cursor: pointer;
}

#mainNavigation > div.folder:last-of-type > .folder-toggle { padding-right: 0; }

/* Nav call-to-action button (outline / pill) */
#mainNavigation > div:not(.folder):last-child > a {
  display: block;
  margin-left: 1em;
  padding: 1em 1.5em;
  letter-spacing: 2px;
  background-color: transparent;
  border: 2px solid #fff;
  border-radius: 300px;
  color: #fff;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  transition: background-color .1s ease-in-out, color .1s ease-in-out;
}
#mainNavigation > div:not(.folder):last-child > a:hover {
  background-color: #fff;
  color: #181818;
}

/* Desktop drop-downs */
#mainNavigation .subnav {
  position: absolute;
  top: 100%;
  left: -.5em;
  z-index: 1000;
  display: inline-block;
  padding: 1em 0;
  font-size: 13px;
  text-align: left;
  white-space: nowrap;
  background-color: var(--header-bg);
  transform: scale(1, 0);
  transform-origin: 0 0;
  transition: transform .14s ease-in-out;
}
#mainNavigation .subnav > div {
  opacity: 0;
  transition: opacity .05s 0s ease-in-out;
}
#mainNavigation .subnav > div a { display: block; padding: .5em 1.5em; }

#mainNavigation .folder:hover .subnav,
#mainNavigation .folder:focus-within .subnav { transform: scale(1, 1); }
#mainNavigation .folder:hover .subnav > div,
#mainNavigation .folder:focus-within .subnav > div {
  opacity: 1;
  transition: opacity .14s .14s ease-in-out;
}
#mainNavigation .folder:last-of-type .subnav {
  left: auto;
  right: -1.5em;
  text-align: right;
}

/* Mobile toggle */
.mobile-nav-toggle {
  display: none;
  position: absolute;
  top: 50%;
  right: 0;
  width: 26px;
  height: 20px;
  margin-top: -10px;
  cursor: pointer;
}
.mobile-nav-toggle div {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #fff;
  transition: transform .2s ease-in-out, opacity .2s ease-in-out;
}
.mobile-nav-toggle .top-bar { top: 0; }
.mobile-nav-toggle .middle-bar { top: 9px; }
.mobile-nav-toggle .bottom-bar { top: 18px; }
body.nav-open .mobile-nav-toggle .top-bar { transform: translateY(9px) rotate(45deg); }
body.nav-open .mobile-nav-toggle .middle-bar { opacity: 0; }
body.nav-open .mobile-nav-toggle .bottom-bar { transform: translateY(-9px) rotate(-45deg); }

/* Mobile drawer */
#sidecarNav {
  display: none;
  background-color: var(--header-bg);
  padding: 0 20px 24px;
}
#sidecarNav nav > div > a,
#sidecarNav nav > div > .folder-toggle { display: block; padding: .75em 0; cursor: pointer; }
#sidecarNav .folder-toggle::before {
  content: '+';
  display: inline-block;
  width: .75em;
  padding-right: .25em;
}
#sidecarNav .folder-toggle.active::before { content: '\2013'; }
#sidecarNav .subnav {
  height: 0;
  max-height: 0;
  overflow: hidden;
  padding: 0 1.5em;
  font-size: 13px;
}
#sidecarNav .folder-toggle.active ~ .subnav {
  height: auto;
  max-height: 999px;
  padding: .25em 1em .5em;
}
#sidecarNav .subnav > div a { display: block; padding: 0 0 .5em; }
#sidecarNav .subnav > div:last-child a { padding-bottom: 1em; }
#sidecarNav nav > div:not(.folder):last-child a {
  display: inline-block;
  margin: .75em 0 0;
  padding: 1em 1.5em;
  line-height: 1;
  border: 2px solid #fff;
  border-radius: 300px;
}

/* --------------------------------------------------------------------------
   6. Banners (inner pages) and the home slideshow
   -------------------------------------------------------------------------- */
/* Banner and hero heights follow the original's `device-height` ladder — they
   key off the physical screen height, not the viewport. See §15b. */
.banner-thumbnail-wrapper {
  position: relative;
  width: 100%;
  min-height: 0;
  overflow: hidden;
  padding: 180px 0 155px;
  background-color: #000;
}
.banner-thumbnail-wrapper .thumbnail { position: absolute; inset: 0; }
.color-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, .3);
}

.desc-wrapper {
  position: relative;
  z-index: 2;
  max-width: var(--site-max);
  margin: 0 auto;
  padding: 32px;
  text-align: center;
}
.desc-wrapper p {
  margin: 20px 0;
  font-family: var(--serif);
  font-size: 24px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 1.5em;
  color: #fff;
}
.desc-wrapper p > strong,
.desc-wrapper p > em > strong {
  display: block;
  font-family: var(--sans);
  font-size: 68px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 4px;
  line-height: 1em;
  text-transform: uppercase;
  color: #fff;
}
.desc-wrapper p:last-child > a {
  display: inline-block;
  margin: 10px auto;
  padding: 1em 1.75em;
  font-family: var(--sans);
  font-size: 15px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 2px;
  line-height: 1em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  background-color: var(--accent-bright);
  border-radius: 300px;
  transition: background-color .1s ease-in-out;
}
.desc-wrapper p:last-child > a > strong { display: inline; font: inherit; letter-spacing: inherit; }
.desc-wrapper p:last-child > a:hover { background-color: rgba(54, 179, 168, .8); }
.desc-wrapper p:last-child > a + a { margin-left: 1em; }

/* Home slideshow ---------------------------------------------------------- */
.sqs-gallery-block-slideshow {
  position: relative;
  width: 100%;
  height: 700px;
  overflow: hidden;
  background-color: rgba(175, 175, 175, .1);
}
.sqs-gallery-block-slideshow .sqs-gallery { position: absolute; inset: 0; }
.sqs-gallery-block-slideshow .slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .5s ease-in-out;
  text-align: left;
}
.sqs-gallery-block-slideshow .slide.active-slide { opacity: 1; }

.sqs-gallery-block-slideshow .meta {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1084px;
  max-width: 100%;
  transform: translate(-50%, -50%);
  padding-top: 25px;
  text-align: center;
  z-index: 2;
}
.sqs-gallery-block-slideshow .meta-inside { padding: 0 32px; }
.meta-description p {
  width: 700px;
  max-width: 100%;
  margin: 20px auto;
  font-family: var(--serif);
  font-size: 24px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 1.5em;
  text-align: center;
  color: #fff;
}
.meta-description p > strong {
  display: block;
  font-family: var(--sans);
  font-size: 68px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 4px;
  line-height: 1em;
  text-transform: uppercase;
  color: #fff;
}
.meta-description p:last-child > a {
  display: inline-block;
  margin: 10px auto;
  padding: 1em 1.75em;
  font-family: var(--sans);
  font-size: 15px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 2px;
  line-height: 1em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  background-color: var(--accent-bright);
  border-radius: 300px;
  transition: background-color .1s ease-in-out;
}
.meta-description p:last-child > a:hover { background-color: rgba(54, 179, 168, .8); }

.sqs-gallery-controls a {
  position: absolute;
  top: 50%;
  margin-top: -30px;
  width: 44px;
  height: 60px;
  padding: 10px;
  z-index: 3;
  cursor: pointer;
  color: #fff;
  opacity: .8;
}
.sqs-gallery-controls a:hover { opacity: 1; }
.sqs-gallery-controls .previous { left: 10px; }
.sqs-gallery-controls .next { right: 10px; }
.sqs-gallery-controls a::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}
.sqs-gallery-controls .previous::before { transform: rotate(-135deg); margin-left: -4px; }
.sqs-gallery-controls .next::before { transform: rotate(45deg); margin-left: -10px; }

/* --------------------------------------------------------------------------
   7. Page shell and Squarespace-style grid
   -------------------------------------------------------------------------- */
#page {
  width: auto;
  max-width: var(--site-max);
  margin: auto;
  padding: 96px 32px;
}

#content { display: block; }

/* folder side-nav pages put the nav and the content side by side */
.has-folder-nav #page { display: flex; align-items: flex-start; }
.has-folder-nav #folderNav {
  flex: 0 0 255px;
  width: 255px;
  padding: 0 64px 0 0;
}
.has-folder-nav #content {
  flex: 0 1 701px;
  width: 701px;
  max-width: 701px;
}

.folder-nav ul { margin: 0; padding: 0; list-style: none; }
.folder-nav li { margin: 0; }
.folder-nav .nav-section-label {
  margin-bottom: 11px;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.2em;
  color: var(--accent-dark);
}
.folder-nav a {
  display: block;
  padding: 0 0 10.5px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 2px;
  line-height: 1.25em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted-link);
  transition: color .1s ease-in-out;
}
.folder-nav a:hover,
.folder-nav .active-link a { color: rgb(26, 26, 26); }
.folder-nav-toggle { display: none; }

/* Grid ---------------------------------------------------------------------
   Rows carry a negative half-gutter; every block carries 17px of padding. */
.sqs-row { width: auto; }
.sqs-row::before, .sqs-row::after { content: ""; display: table; }
.sqs-row::after { clear: both; }
.sqs-layout > .sqs-row { margin-left: -17px; margin-right: -17px; }

.col { float: left; min-height: 1px; }

.sqs-col-12 { width: 100%; }
.sqs-col-11 { width: 91.6667%; }
.sqs-col-10 { width: 83.3333%; }
.sqs-col-9  { width: 75%; }
.sqs-col-8  { width: 66.6667%; }
.sqs-col-7  { width: 58.3333%; }
.sqs-col-6  { width: 50%; }
.sqs-col-5  { width: 41.6667%; }
.sqs-col-4  { width: 33.3333%; }
.sqs-col-3  { width: 25%; }
.sqs-col-2  { width: 16.6667%; }
.sqs-col-1  { width: 8.3333%; }

/* nested columns are a fraction of their parent column, as in the original */
.sqs-col-12 .sqs-col-12 { width: 100%; }
.sqs-col-12 .sqs-col-11 { width: 91.6667%; }
.sqs-col-12 .sqs-col-10 { width: 83.3333%; }
.sqs-col-12 .sqs-col-9 { width: 75%; }
.sqs-col-12 .sqs-col-8 { width: 66.6667%; }
.sqs-col-12 .sqs-col-7 { width: 58.3333%; }
.sqs-col-12 .sqs-col-6 { width: 50%; }
.sqs-col-12 .sqs-col-5 { width: 41.6667%; }
.sqs-col-12 .sqs-col-4 { width: 33.3333%; }
.sqs-col-12 .sqs-col-3 { width: 25%; }
.sqs-col-12 .sqs-col-2 { width: 16.6667%; }
.sqs-col-12 .sqs-col-1 { width: 8.3333%; }
.sqs-col-11 .sqs-col-11 { width: 100%; }
.sqs-col-11 .sqs-col-10 { width: 90.9091%; }
.sqs-col-11 .sqs-col-9 { width: 81.8182%; }
.sqs-col-11 .sqs-col-8 { width: 72.7273%; }
.sqs-col-11 .sqs-col-7 { width: 63.6364%; }
.sqs-col-11 .sqs-col-6 { width: 54.5455%; }
.sqs-col-11 .sqs-col-5 { width: 45.4545%; }
.sqs-col-11 .sqs-col-4 { width: 36.3636%; }
.sqs-col-11 .sqs-col-3 { width: 27.2727%; }
.sqs-col-11 .sqs-col-2 { width: 18.1818%; }
.sqs-col-11 .sqs-col-1 { width: 9.0909%; }
.sqs-col-10 .sqs-col-10 { width: 100%; }
.sqs-col-10 .sqs-col-9 { width: 90%; }
.sqs-col-10 .sqs-col-8 { width: 80%; }
.sqs-col-10 .sqs-col-7 { width: 70%; }
.sqs-col-10 .sqs-col-6 { width: 60%; }
.sqs-col-10 .sqs-col-5 { width: 50%; }
.sqs-col-10 .sqs-col-4 { width: 40%; }
.sqs-col-10 .sqs-col-3 { width: 30%; }
.sqs-col-10 .sqs-col-2 { width: 20%; }
.sqs-col-10 .sqs-col-1 { width: 10%; }
.sqs-col-9 .sqs-col-9 { width: 100%; }
.sqs-col-9 .sqs-col-8 { width: 88.8889%; }
.sqs-col-9 .sqs-col-7 { width: 77.7778%; }
.sqs-col-9 .sqs-col-6 { width: 66.6667%; }
.sqs-col-9 .sqs-col-5 { width: 55.5556%; }
.sqs-col-9 .sqs-col-4 { width: 44.4444%; }
.sqs-col-9 .sqs-col-3 { width: 33.3333%; }
.sqs-col-9 .sqs-col-2 { width: 22.2222%; }
.sqs-col-9 .sqs-col-1 { width: 11.1111%; }
.sqs-col-8 .sqs-col-8 { width: 100%; }
.sqs-col-8 .sqs-col-7 { width: 87.5%; }
.sqs-col-8 .sqs-col-6 { width: 75%; }
.sqs-col-8 .sqs-col-5 { width: 62.5%; }
.sqs-col-8 .sqs-col-4 { width: 50%; }
.sqs-col-8 .sqs-col-3 { width: 37.5%; }
.sqs-col-8 .sqs-col-2 { width: 25%; }
.sqs-col-8 .sqs-col-1 { width: 12.5%; }
.sqs-col-7 .sqs-col-7 { width: 100%; }
.sqs-col-7 .sqs-col-6 { width: 85.7143%; }
.sqs-col-7 .sqs-col-5 { width: 71.4286%; }
.sqs-col-7 .sqs-col-4 { width: 57.1429%; }
.sqs-col-7 .sqs-col-3 { width: 42.8571%; }
.sqs-col-7 .sqs-col-2 { width: 28.5714%; }
.sqs-col-7 .sqs-col-1 { width: 14.2857%; }
.sqs-col-6 .sqs-col-6 { width: 100%; }
.sqs-col-6 .sqs-col-5 { width: 83.3333%; }
.sqs-col-6 .sqs-col-4 { width: 66.6667%; }
.sqs-col-6 .sqs-col-3 { width: 50%; }
.sqs-col-6 .sqs-col-2 { width: 33.3333%; }
.sqs-col-6 .sqs-col-1 { width: 16.6667%; }
.sqs-col-5 .sqs-col-5 { width: 100%; }
.sqs-col-5 .sqs-col-4 { width: 80%; }
.sqs-col-5 .sqs-col-3 { width: 60%; }
.sqs-col-5 .sqs-col-2 { width: 40%; }
.sqs-col-5 .sqs-col-1 { width: 20%; }
.sqs-col-4 .sqs-col-4 { width: 100%; }
.sqs-col-4 .sqs-col-3 { width: 75%; }
.sqs-col-4 .sqs-col-2 { width: 50%; }
.sqs-col-4 .sqs-col-1 { width: 25%; }
.sqs-col-3 .sqs-col-3 { width: 100%; }
.sqs-col-3 .sqs-col-2 { width: 66.6667%; }
.sqs-col-3 .sqs-col-1 { width: 33.3333%; }
.sqs-col-2 .sqs-col-2 { width: 100%; }
.sqs-col-2 .sqs-col-1 { width: 50%; }
.sqs-col-1 .sqs-col-1 { width: 100%; }

/* Block gutters. These reproduce the original's cascade exactly: every block
   carries 17px, the first/last block in a column drops the outer half, and a
   row that follows another block or row keeps its bottom gutter. */
.sqs-block { position: relative; padding: 17px; }
.sqs-block.float { float: left; }
.sqs-block.float-right { float: right; }
.sqs-row .sqs-block:first-child { padding-top: 0; }
.sqs-row .sqs-block:first-child:last-child { padding-bottom: 0; }
.sqs-row.after-block .sqs-block:first-child,
.sqs-row + .sqs-row .sqs-block:first-child { padding-top: 17px; }
.sqs-row.after-block .sqs-block:first-child:last-child,
.sqs-row + .sqs-row .sqs-block:first-child:last-child { padding-bottom: 17px; }
.sqs-row.after-block .sqs-block:last-child,
.sqs-row + .sqs-row:not(:last-child) .sqs-block:last-child { padding-bottom: 17px; }
.sqs-layout > .sqs-row:last-child > [class*="sqs-col"] > .sqs-block:last-child { padding-bottom: 0; }
.sqs-layout > .sqs-row:first-child > [class*="sqs-col"]:first-child > .sqs-block:not(:first-child):last-child { padding-bottom: 17px; }

hr {
  height: 1px;
  margin: 32px 0;
  border: 0;
  background-color: var(--rule);
  color: var(--rule);
}
.sqs-block-horizontalrule hr { margin: 32px 0; }

/* --------------------------------------------------------------------------
   8. Rich text
   -------------------------------------------------------------------------- */
.sqs-html-content h1 {
  margin: 0 0 16px;
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.2em;
  text-transform: none;
  color: var(--heading-text);
}
.sqs-html-content h2 {
  margin: 25px 0 12.5px;
  font-family: var(--sans);
  font-size: 25px;
  font-weight: 600;
  letter-spacing: .05em;
  line-height: 1.2em;
  text-transform: uppercase;
  color: var(--h2-text);
}
.sqs-html-content h3 {
  margin: 0 0 8px;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 2px;
  line-height: 1.2em;
  text-transform: uppercase;
  color: var(--heading-text);
}
.sqs-html-content p {
  margin: 18px 0;
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.6em;
  color: var(--body-text);
}
.sqs-html-content ul,
.sqs-html-content ol { margin: 18px 0; padding-left: 40px; }
.sqs-html-content li { margin: 0; }
.sqs-html-content li p { margin: 0; }
.sqs-html-content a {
  color: var(--accent);
  text-decoration: none;
}
.sqs-html-content a:hover { text-decoration: underline; }
.sqs-html-content strong { font-weight: 600; }
.sqs-html-content > :first-child { margin-top: 0; }
.sqs-html-content > :last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   9. Image "card" blocks (home page feature rows)
   -------------------------------------------------------------------------- */
.image-block-outer-wrapper.design-layout-card {
  position: relative;
  display: flex;
  justify-content: space-between;
}
.design-layout-card.image-position-right { flex-direction: row-reverse; }
.design-layout-card > .intrinsic { position: relative; width: calc(50% - 1%); }
.design-layout-card .image-card-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(50% - 1%);
  min-height: 100%;
  background-color: #fff;
}
.design-layout-card.image-position-left .image-card-wrapper { margin-left: 2%; }
.design-layout-card.image-position-right .image-card-wrapper { margin-right: 2%; }

.design-layout-card .image-card { position: relative; width: 100%; padding: 9% 0; }
.design-layout-card .image-title-wrapper,
.design-layout-card .image-subtitle-wrapper,
.design-layout-card .image-button-wrapper { padding: 0 9%; text-align: center; }
.design-layout-card .image-button-wrapper { margin-top: 8%; }
.design-layout-card .image-title-wrapper + .image-subtitle-wrapper .image-subtitle { margin-top: 6%; }

.design-layout-card .image-title p {
  margin: 0;
  font-family: var(--sans);
  font-size: max(13px, calc(19 * var(--card-w) / 1248));
  font-weight: 600;
  letter-spacing: .3em;
  line-height: 1.1em;
  text-transform: uppercase;
  color: var(--card-title);
}
.design-layout-card .image-subtitle p {
  margin: 0;
  font-family: var(--serif);
  font-size: max(13px, calc(30 * var(--card-w) / 1248));
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5em;
  color: var(--card-subtitle);
}
.design-layout-card .image-button a {
  display: inline-block;
  padding: 1em 2.5em;
  font-family: var(--sans);
  font-size: max(11px, calc(16 * var(--card-w) / 1248));
  font-weight: 400;
  letter-spacing: .1em;
  line-height: 1.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  background-color: var(--accent);
  border: 0;
  border-radius: 5em;
}
.design-layout-card .image-button a:hover { opacity: .8; }

/* Inline images (board portraits, logos) */
.image-block-outer-wrapper.design-layout-inline .sqs-block-image-figure { margin: 0; }

/* --------------------------------------------------------------------------
   10. Buttons and embeds
   -------------------------------------------------------------------------- */
.sqs-block-button-container { text-align: left; }
.sqs-block-button-container--center { text-align: center; }
.sqs-block-button-container--right { text-align: right; }
.sqs-block-button-element {
  display: inline-block;
  font-family: var(--sans);
  font-style: normal;
  text-decoration: none;
  text-transform: uppercase;
  color: #fff;
}
.sqs-block-button-element--small {
  padding: 13px 26px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  background-color: #272727;
}
.sqs-block-button-element--medium {
  padding: 21px 34px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .15em;
  background-color: var(--accent-bright);
  border-radius: 300px;
}
.sqs-block-button-element--large {
  padding: 25px 46px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 1px;
  background-color: #272727;
}
.sqs-block-button-element:hover { opacity: .8; }

.embed-placeholder { width: 100%; aspect-ratio: 16 / 9; }

/* --------------------------------------------------------------------------
   11. Forms (contact page)
   -------------------------------------------------------------------------- */
.form-wrapper .field-list { margin: 0; }
.form-wrapper .form-item {
  margin: 0 0 18px;
  padding: 0;
  border: 0;
}
.form-wrapper .form-item:last-child { margin-bottom: 0; }
.form-wrapper .title {
  display: block;
  margin: 0;
  padding: 0;
  font-family: var(--serif);
  font-size: 18px;
  line-height: 23px;
  color: var(--body-text);
}
.form-wrapper label.title { padding-bottom: 4px; }
.form-wrapper .required {
  font-size: 12px;
  font-style: italic;
  color: rgba(26, 26, 26, .5);
}
.form-wrapper .fields-inner { display: flex; gap: 10px; }
.form-wrapper .field { flex: 1 1 0; min-width: 0; }
.form-wrapper .caption {
  display: block;
  font-family: var(--serif);
  font-size: 12px;
  line-height: 23px;
  color: var(--body-text);
}
.form-wrapper input[type="text"],
.form-wrapper input[type="email"],
.form-wrapper input[type="tel"],
.form-wrapper textarea {
  display: block;
  width: 100%;
  height: 45px;
  padding: 10px;
  font-family: var(--serif);
  font-size: 18px;
  color: #000;
  background-color: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: 0;
}
.form-wrapper textarea { height: 100px; resize: vertical; }
.form-button-wrapper { margin-top: 18px; }
.form-button-wrapper .button {
  display: inline-block;
  padding: 18px 45px;
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 300;
  letter-spacing: 3px;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
  background-color: var(--submit-bg);
  border: 0;
  cursor: pointer;
}
.form-button-wrapper .button:hover { opacity: .85; }

/* --------------------------------------------------------------------------
   12. Event calendar (events page)
   -------------------------------------------------------------------------- */
.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}
.calendar-header h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.2em;
  color: var(--heading-text);
}
.calendar-nav {
  width: 44px;
  height: 44px;
  position: relative;
  cursor: pointer;
  color: var(--body-text);
}
.calendar-nav::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
}
.calendar-nav.prev::before { transform: rotate(-135deg); }
.calendar-nav.next::before { transform: rotate(45deg); }

table.calendar-grid { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
table.calendar-grid th {
  padding: 1px 1px 10px;
  font-family: var(--serif);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .5px;
  line-height: 12px;
  text-align: center;
  text-transform: uppercase;
  color: var(--body-text);
}
table.calendar-grid td {
  position: relative;
  height: 132px;
  padding: 1px;
  vertical-align: top;
  background-clip: padding-box;
  background-color: rgba(110, 110, 110, .05);
  border: 1px solid #fff;
}
table.calendar-grid td.other-month { background-color: transparent; border-color: transparent; }
.day-number {
  display: block;
  padding: 8px 10px 0;
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1;
  text-align: right;
  color: rgba(26, 26, 26, .55);
}
.calendar-grid .item {
  margin: 0 10px 7px;
  font-family: var(--serif);
  font-size: 12px;
  line-height: 14px;
  color: var(--body-text);
}
.calendar-grid .item .time { font-weight: 600; color: rgba(26, 26, 26, .8); }
.calendar-grid .item a { color: var(--accent); text-decoration: none; }
.calendar-grid td.has-image { padding: 0; }
.calendar-grid td.has-image .day-number {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  padding: 6px 10px;
  background: #fff;
}
.calendar-grid td .ph { height: 100%; min-height: 132px; }
.calendar-grid td.has-image a { display: block; height: 100%; }
.calendar-grid td.has-image img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 132px;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   13. Pre-footer (newsletter)
   -------------------------------------------------------------------------- */
#preFooter {
  background-color: var(--prefooter-bg);
  color: #000;
  -moz-osx-font-smoothing: auto;
  -webkit-font-smoothing: subpixel-antialiased;
}
.pre-footer-inner {
  max-width: var(--site-max);
  margin: 0 auto;
  text-align: center;
}
.pre-footer-inner .sqs-layout { padding: 32px; }
#preFooter a { color: #000; }

.newsletter-form-wrapper { padding: 34px 17px; }
.newsletter-form { text-align: center; }
.newsletter-form-header { margin: 0 7.5%; }
.newsletter-form-header-title {
  margin: 0 0 17px;
  font-family: var(--sans);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: 1.5px;
  line-height: 1.2em;
  text-transform: uppercase;
  color: #000;
}
.newsletter-form-header-description p {
  margin: 17px 0;
  font-family: var(--serif);
  font-size: 15px;
  line-height: 24px;
  color: var(--prefooter-text);
}
.newsletter-form-body { padding: 0 0 12px; }
.newsletter-form-fields-wrapper,
.newsletter-form-button-wrapper {
  display: inline-block;
  vertical-align: top;
  margin-top: 12px;
  padding: 6px 3px;
}
.newsletter-form-field-wrapper { min-width: 250px; }
.newsletter-form-field-label { position: absolute; left: -9999px; }
.newsletter-form-field-element {
  width: 244px;
  height: 51px;
  padding: 15px;
  font-family: var(--serif);
  font-size: 15px;
  color: #000;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: 0;
}
.newsletter-form-button {
  height: 51px;
  padding: 15px 37.5px;
  font-family: var(--serif);
  font-size: 15px;
  text-transform: uppercase;
  color: #fff;
  background-color: #262626;
  border: 1px solid #262626;
  border-radius: 0;
  cursor: pointer;
}
.newsletter-form-button:hover { opacity: .85; }
.newsletter-form-footnote p {
  margin: 17px 0 0;
  font-size: 12px;
  line-height: 1.25;
  color: var(--prefooter-text);
}

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */
#footer {
  background-color: #fff;
  color: var(--footer-text);
}
.footer-inner {
  max-width: var(--site-max);
  margin: 0 auto;
  padding: 64px 32px;
  text-align: center;
}
#footerBlocks { margin-top: 27px; }
#footer .sqs-html-content p {
  margin: 0;
  text-align: center;
  color: var(--footer-text);
}
#footer .sqs-html-content a { color: var(--footer-text); border-bottom: 1px solid var(--footer-text); }

.social-icons {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.social-icons a {
  display: block;
  width: 20px;
  height: 20px;
  color: #000;
}
.social-icons svg { display: block; width: 20px; height: 20px; fill: currentColor; }

.back-to-top-nav { display: none; }

/* --------------------------------------------------------------------------
   15a. Device-height ladder
   The original sizes its hero slideshow and its page banners from the physical
   screen height, not the viewport, so the same breakpoints are used here:
     screen taller than 768px .... hero 700px, banner 180px/155px  (desktop)
     768px or shorter ............ hero 640px, banner  60px/20px
     640px or shorter ............ hero 340px, plus reduced hero type
   -------------------------------------------------------------------------- */
@media only screen and (max-device-height: 768px) {
  .sqs-gallery-block-slideshow { height: 640px; }
  .sqs-gallery-block-slideshow .meta-inside { padding-top: 40px; }
  .banner-thumbnail-wrapper { padding: 60px 0 20px; }
}

@media only screen and (max-device-height: 640px) {
  .sqs-gallery-block-slideshow { height: 340px; }
  /* the original drops the hero to its reduced type at this size */
  .meta-description p { font-size: 14px; letter-spacing: 2px; line-height: 21px; }
  .meta-description p > strong { font-size: 22px; letter-spacing: 2px; line-height: 22px; }
  .meta-description p:last-child > a { font-size: 13px; letter-spacing: 2px; }
}

/* --------------------------------------------------------------------------
   15. Responsive
   -------------------------------------------------------------------------- */

/* Mobile navigation kicks in just above 1020px, as on the original. */
@media screen and (max-width: 1015px) {
  #headerNav { display: none; }
  .header-inner { display: block; padding: 20px 0; }
  #logoWrapper { display: inline-block; width: 240px; max-width: 240px; vertical-align: middle; }
  .mobile-nav-toggle { display: block; }
  #header { position: relative; background-color: var(--header-bg); }
  body.nav-open #sidecarNav { display: block; }

  .has-folder-nav #page { display: block; }
  .has-folder-nav #folderNav,
  .has-folder-nav #content { display: block; width: 100%; max-width: none; padding-right: 0; }
  .has-folder-nav #folderNav { margin-bottom: 32px; }
}

@media screen and (max-width: 900px) {
  .desc-wrapper p > strong { font-size: 48px; letter-spacing: 3px; }
}

@media screen and (max-width: 767px) {
  #page { padding: 32px; }
  .desc-wrapper p > strong { font-size: 36px; letter-spacing: 2px; }
  .desc-wrapper p { font-size: 18px; }
  .col { float: none; width: 100% !important; }
  .sqs-layout > .sqs-row { margin-left: -17px; margin-right: -17px; }
  .sqs-layout .sqs-row .sqs-block:first-child { padding-top: 17px !important; }
  .sqs-layout .sqs-row .sqs-block:last-child { padding-bottom: 17px !important; }
  .sqs-block-spacer { display: none; }
}

@media screen and (max-width: 640px) {
  #page { padding: 40px 20px; }
  .footer-inner,
  .pre-footer-inner .sqs-layout { padding: 20px; }
  #logoImage .ph--logo { width: 141px; height: 50px; }
  #logoImage .media--logo { width: auto; height: 50px; }
  #logoWrapper { width: auto; }
  .meta-description p > strong { font-size: 18px; }
  table.calendar-grid td { height: 64px; }
  table.calendar-grid td .ph,
  table.calendar-grid td.has-image img { min-height: 64px; }
  .calendar-grid .item { display: none; }
}

@media screen and (max-width: 439px) {
  .image-block-outer-wrapper.design-layout-card { display: block; }
  .design-layout-card > .intrinsic,
  .design-layout-card .image-card-wrapper { width: 100%; margin: 0; }
  .design-layout-card .image-card-wrapper { margin-top: 2%; }
  .desc-wrapper p > strong { font-size: 28px; letter-spacing: 1px; }
}