/*!
Theme Name: rhythm
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: rhythm
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

rhythm is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace;
  font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
  color: #404040;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  clear: both;
}

p {
  margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
  font-style: italic;
}

blockquote {
  margin: 0 1.5em;
}

address {
  margin: 0 0 1.5em;
}

pre {
  background: #eee;
  font-family: "Courier 10 Pitch", courier, monospace;
  line-height: 1.6;
  margin-bottom: 1.6em;
  max-width: 100%;
  overflow: auto;
  padding: 1.6em;
}

code,
kbd,
tt,
var {
  font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
  border-bottom: 1px dotted #666;
  cursor: help;
}

mark,
ins {
  background: #fff9c0;
  text-decoration: none;
}

big {
  font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
  background: #fff;
}

hr {
  background-color: #ccc;
  border: 0;
  height: 1px;
  margin-bottom: 1.5em;
}

ul,
ol {
  margin: 0 0 1.5em 3em;
}

ul {
  list-style: disc;
}

ol {
  list-style: decimal;
}

li > ul,
li > ol {
  margin-bottom: 0;
  margin-left: 1.5em;
}

dt {
  font-weight: 700;
}

dd {
  margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
  max-width: 100%;
}

img {
  height: auto;
  max-width: 100%;
}

figure {
  margin: 1em 0;
}

table {
  margin: 0 0 1.5em;
  width: 100%;
}

/* Links
--------------------------------------------- */
a {
  color: #4169e1;
}

/* a:visited {
 color: #800080;
}

a:hover,
a:focus,
a:active {
  /* color: #191970; 
} */

a:focus {
  outline: thin dotted;
}

a:hover,
a:active {
  outline: 0;
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  border: 1px solid;
  border-color: #ccc #ccc #bbb;
  border-radius: 3px;
  background: #e6e6e6;
  color: rgba(0, 0, 0, 0.8);
  line-height: 1;
  padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
  border-color: #ccc #bbb #aaa;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
  border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
  color: #666;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
  color: #111;
}

select {
  border: 1px solid #ccc;
}

textarea {
  width: 100%;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Navigation
--------------------------------------------- */
.main-navigation {
  display: block;
  width: 100%;
}

.main-navigation ul {
  display: none;
  list-style: none;
  margin: 0;
  padding-left: 0;
}

.main-navigation ul ul {
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
  float: left;
  position: absolute;
  top: 100%;
  left: -999em;
  z-index: 99999;
}

.main-navigation ul ul ul {
  left: -999em;
  top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
  display: block;
  left: auto;
}

.main-navigation ul ul a {
  width: 200px;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
  left: auto;
}

.main-navigation li {
  position: relative;
}

.main-navigation a {
  display: block;
  text-decoration: none;
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
  display: block;
}

@media screen and (min-width: 37.5em) {
  .menu-toggle {
    display: none;
  }

  .main-navigation ul {
    display: flex;
  }
}

.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
  margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
  display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
  flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
  text-align: end;
  flex: 1 0 50%;
}

/* Posts and pages
--------------------------------------------- */
.sticky {
  display: block;
}

.post,
.page {
  margin: 0 0 1.5em;
}

.updated:not(.published) {
  display: none;
}

.page-content,
.entry-content,
.entry-summary {
  margin: 1.5em 0 0;
}

.page-links {
  clear: both;
  margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
  word-wrap: break-word;
}

.bypostauthor {
  display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
  margin: 0 0 1.5em;
}

.widget select {
  max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
  border: none;
  margin-bottom: 0;
  margin-top: 0;
  padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
  display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
  margin-bottom: 1.5em;
  max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.wp-caption .wp-caption-text {
  margin: 0.8075em 0;
}

.wp-caption-text {
  text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
  margin-bottom: 1.5em;
  display: grid;
  grid-gap: 1.5em;
}

.gallery-item {
  display: inline-block;
  text-align: center;
  width: 100%;
}

.gallery-columns-2 {
  grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
  grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
  grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
  grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
  grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
  grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
  grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
  grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
  display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
  display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
  display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  background-color: #f1f1f1;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  clip-path: none;
  color: #21759b;
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
  outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {
  /*rtl:ignore*/
  float: left;

  /*rtl:ignore*/
  margin-right: 1.5em;
  margin-bottom: 1.5em;
}

.alignright {
  /*rtl:ignore*/
  float: right;

  /*rtl:ignore*/
  margin-left: 1.5em;
  margin-bottom: 1.5em;
}

.aligncenter {
  clear: both;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.5em;
}

/* new css */

:root {
  --header-height: 72px;
  --container-pad: clamp(16px, 4vw, 32px);
  --accent: #dc4225;
  --accent-dark: #002f4b;
  --text-on-dark: #fff;
  --text-on-light: #1a1a1a;
  --maxw: 1200px;
  --section-pad: clamp(32px, 6vw, 72px);
  --radius: 12px;
  --shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

div {
  transform: skewX(0deg);
  transform-origin: left center;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: "Special Gothic", "Gothic A1", system-ui, -apple-system, Segoe UI,
    Roboto, Inter, Arial, sans-serif;
  color: var(--text-on-light);
  background: #fff;
  line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Fjalla One", Arial, sans-serif;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.container {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* Sticky header */
.site-header {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  z-index: 9999;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

/* Bulletproof sticky: make it fixed 
.site-header {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}

/* Offset the document so content isn't hidden behind the fixed header 
body {
  padding-top: var(--header-height);
}

/* Keep anchor jumps readable with a fixed header 
:target {
  scroll-margin-top: calc(var(--header-height) + 16px);
}

*/

.header-inner {
  min-height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* Header logo — black */
.logo img {
  width: 200px;
  height: 50px;
  object-fit: contain;
}

.logo-black {
  filter: brightness(0) saturate(100%);
}

/* Footer logo — white */
.logo-white {
  filter: brightness(0) invert(1);
}

/* Nav */
.nav {
  display: flex;
  align-items: center;
  gap: clamp(8px, 3vw, 2px);
  width: auto;
}

.nav a {
  text-decoration: none;
  font-family: "Fjalla One", Arial, sans-serif;
  letter-spacing: 0.02em;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #fff;
  color: var(--text-on-light);
  box-shadow: var(--shadow);
  transition: transform 0.12s ease, box-shadow 0.2s ease, background 0.2s ease;
  text-transform: uppercase;
}

.nav a:hover {
  transform: translateY(-1px);
}

.nav a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.main-navigation ul {
  gap: 8px;
}

:target {
  scroll-margin-top: calc(var(--header-height) + 16px);
}

/* Hero */
.hero {
  position: relative;
  min-height: calc(100vh - 1px);
  color: #fff;
  isolation: isolate;
}

.carousel {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.carousel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 800ms ease-in-out;
}

.carousel img.active {
  opacity: 1;
}

/* Simple content overlay (no overlay container, no grid) */
.hero-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--section-pad);
  /* gentle gradient for readability */
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.25) 0%,
    rgba(0, 0, 0, 0) 30%,
    rgba(0, 0, 0, 0.35) 100%
  );
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.6);
}

/* Hero brand mark (SVG) */
.brand-mark {
  display: block;
  width: 60vw;
  /* 75% page width anywhere it appears */
  max-width: 75vw;
  margin-inline: auto;
}

.brand-mark--hero {
  filter: brightness(0) invert(1) drop-shadow(0 0 18px #ffffff);
}

.when-line,
.hero-content p {
  margin: 16px 4em 20px;
  font-size: clamp(16px, 2.8vw, 25px);
}

.cta {
  display: inline-block;
  padding: 14px 20px;
  border-radius: 10px;
  background: #fff;
  color: #111;
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--shadow);
}

/* Partners section — dark background with angled tiny logos, logos in #dc4225, with white box overlay */
.partners {
  color: black;
  padding: clamp(24px, 4vw, 44px) 0;
  background-color: #002f4b;
  /* dark background */
  background-image: url("images/tinylogo.svg");
  /* SVG itself should be colored #dc4225 */
  background-size: 40px 40px;
  /* very small */
  background-repeat: repeat;
  background-position: center;
  background-attachment: scroll;
  background-origin: content-box;
  transform: none;
  text-color: black;

  background-transform: rotate(-15deg);
  position: relative;
}

/* White box overlay */
.partners::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.9);
  /* 90% opaque white */
  z-index: 0;
}

.partners-inner {
  text-align: center;
  position: relative;
  z-index: 1;
  /* bring content above white box */
}

.logo-row {
  display: flex;
  gap: clamp(16px, 6vw, 48px);
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

/* Make both logos same width, MCCNO slightly smaller than before */
.partner-logo {
  width: clamp(220px, 28vw, 360px);
  height: auto;
}

.partner-logo.mccno {
  width: clamp(200px, 25vw, 320px);
}

/* reduced size */

/* About section — skyline.jpg + two columns (no parallax for performance) */
.about {
  position: relative;
  color: #fff;
  padding-block: 100px;
  overflow: clip;
}

.about::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("images/skyline.jpg") center / cover no-repeat;
  /* removed fixed for perf */
  opacity: 0.55;
  z-index: 0;
}

.about .content {
  position: relative;
  z-index: 1;
}

.about h2 {
  margin: 0 0 16px;
  font-size: clamp(24px, 5vw, 40px);
  text-align: center;
}

.about-grid {
  display: grid;
  gap: 24px;
  margin-top: 12px;
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .about-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.about p {
  margin: 0;
  font-size: clamp(16px, 2.4vw, 20px);
  line-height: 1.7;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

/* REGISTER — postcard.jpg + 75% white overlay */
.register {
  padding-block: var(--section-pad);
  background-image: linear-gradient(
    to bottom right,
    var(--accent-dark),
    var(--accent)
  );
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.register .card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--radius);
  padding: clamp(20px, 4vw, 32px);
  box-shadow: var(--shadow);
  display: grid;
  gap: 12px;
}

.register h2 {
  margin: 0;
  font-size: clamp(22px, 4.5vw, 36px);
}

/* Sponsors */
.sponsors {
  padding-block: var(--section-pad);
  background: ;
  color: #fff;
}

.sponsors h2 {
  margin-top: 0;
}

.sponsor-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 3vw, 24px);
  margin-top: 12px;
}

@media (min-width: 700px) {
  .sponsor-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .sponsor-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.sponsor-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  padding: 30px;
  display: grid;
  place-items: center;
  min-height: 140px;
  background-color: #fff;
}

.sponsor-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom right,
    rgba(0, 0, 0, 0.1),
    rgba(255, 255, 255, 0.1)
  );
  pointer-events: none;
}

/* Footer */
.site-footer {
  background: #111;
  color: #ddd;
  padding: 28px 0 40px;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.site-footer img {
  margin-inline: auto;
  width: 200px;
  height: 50px;
  object-fit: contain;
}

.site-footer p {
  max-width: 90%;
  margin: 10px auto 0;
  font-size: 14px;
  opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {
  transition: opacity 800ms ease-in-out;
  /* <- fade happens here */
}

/* Board/Staff Section */
.board-staff {
  /* padding-block: var(--section-pad); */
  background: #f9f9f9;
}

.board-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
}

.board-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 16px;
}

.board-card img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  margin-bottom: 12px;
}

.board-card h3 {
  font-family: "Fjalla One", Arial, sans-serif;
  margin: 8px 0 4px;
}

.board-card p.role,
.board-card p strong {
  font-size: 14px;
  font-weight: bold;
  color: var(--accent-dark);
  margin-bottom: 8px;
}

.board-card p.bio {
  font-size: 14px;
  color: #333;
}

/* Board layout: first row of 3 centered, second row of 4 */
.board-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  justify-items: center;
}

.board-grid.row-2 {
  grid-template-columns: repeat(4, 1fr);
  margin-top: 24px;
}

.board-card {
  max-width: 260px;
}

.board-card img {
}

.board-card img::after {
  background: linear-gradient(to bottom, #111111, #eeeeee);
  mix-blend-mode: color;
}

.hero .event-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  margin: 30px auto;
  padding-block: unset;
}

.event-button {
  display: inline-block;
  background: #dc4225;
  /* red background */
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
  /* subtle shadow */
  padding: 14px 20px;
  transform: skewX(0deg);
  text-align: center;
  cursor: pointer;
  transition: all 0.25s ease;
}

.event-button:hover {
  background: #b9361f;
  /* slightly darker on hover */
  transform: translateY(-3px);
}

.event-button span {
  display: inline-block;
  transform: skewX(0deg);
  font-family: "Fjalla One", Arial, sans-serif;
  letter-spacing: 0.02em;
  font-size: clamp(18px, 2vw, 22px);
  color: #fff;
  /* blue text */
  text-transform: uppercase;
}

@media (max-width: 768px) {
  .event-buttons {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
}

.partners .dual-logos {
  display: flex;
  gap: 2rem;
  /* spacing between the two logos */
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  /* stack on small screens */
}

.partner-logo {
  width: 200px;
  /* fixed width */
  height: auto;
  /* maintain aspect ratio */
}

.sponsors .container {
  max-width: 75%;
  margin: 0 auto;
}

.sponsor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  justify-content: center;
  align-items: center;
}

.sponsor-card a {
  display: block;
  line-height: 0;
}

.sponsor-card img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

/* Tablet: 2 per row */
@media (max-width: 768px) {
  .sponsor-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile: 1 per row */
@media (max-width: 480px) {
  .sponsor-grid {
    grid-template-columns: 1fr;
  }
}

#schedule {
  display: flex;
  flex-wrap: wrap;
  /* lets them stack on small screens */
  gap: 32px;
  padding: 45px;
  background: linear-gradient(
    to left,
    rgba(255, 255, 255, 0.25) 0%,
    rgba(255, 255, 255, 1) 100%
  );
}

#schedule > div {
  flex: 1 1 0;
  /* evenly splits space */
  min-width: 300px;
  /* ensures stacking on narrow screens */
  word-wrap: break-word;
  /* prevent text overflow */
}

#schedule h3 {
  margin-top: 0;
}

#schedule ul {
  padding-left: 20px;
  margin: 0;
}

/* Responsive tweaks for smaller screens */
@media (max-width: 768px) {
  #schedule {
    padding: 20px;
    gap: 16px;
  }

  #schedule > div {
    flex: 1 1 100%;
    /* full width on smaller devices */
    min-width: unset;
  }
}

@media (max-width: 480px) {
  #schedule {
    padding: 15px;
  }

  #schedule ul li {
    font-size: 14px;
    line-height: 1.4;
  }
}

.event-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  margin: 30px auto;
}

.event-button {
  display: inline-block;
  background: #dc4225;
  /* red background */
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
  /* subtle shadow */
  padding: 14px 20px;
  transform: skewX(0deg);
  text-align: center;
  cursor: pointer;
  transition: all 0.25s ease;
}

.event-button:hover {
  background: #b9361f;
  /* slightly darker on hover */
  transform: translateY(-3px);
}

.event-button span {
  display: inline-block;
  transform: skewX(0deg);
  font-family: "Fjalla One", Arial, sans-serif;
  letter-spacing: 0.02em;
  font-size: clamp(18px, 2vw, 22px);
  color: #fff;
  /* blue text */
  text-transform: uppercase;
}

@media (max-width: 768px) {
  .event-buttons {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
}

.embed-wrap {
  position: relative;
  width: 100%;
  /* 2:1 ratio → height is 50% of width; make 56.25% for 16:9, etc. */
  padding-top: 50%;
  height: 975px;
}

.embed-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 720px) {
  #keep-in-touch form > div > div:nth-child(1),
  #keep-in-touch form > div > div:nth-child(2) {
    grid-template-columns: 1fr !important;
    /* stack first/last + email/cell */
  }
}

@media (max-width: 720px) {
  #countdown #timer {
    grid-template-columns: repeat(2, minmax(120px, 1fr)) !important;
  }
}

.ra-section {
  /* Gradient: top-left (#d62a1a) to bottom-right (#032f4a) */
  background: linear-gradient(135deg, #d62a1a 0%, #032f4a 100%);
  padding: min(6vw, 48px) 16px;
  color: #fff;
}

.ra-wrap {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.ra-image {
  width: 40%;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  cursor: zoom-in;
}

.ra-link {
  display: inline-block;
  margin-top: 14px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 10px;
  color: #fff;
  text-decoration: none;
  backdrop-filter: blur(2px);
  transition: transform 0.12s ease, background 0.12s ease;
}

.ra-link:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.18);
}

/* Lightbox */
.ra-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.ra-lightbox.is-open {
  /* display: flex; */
}

.ra-lightbox__img {
  max-width: 92vw;
  max-height: 88vh;
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
}

.ra-lightbox__close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  backdrop-filter: blur(2px);
}

.ra-lightbox__close:hover {
  background: rgba(255, 255, 255, 0.28);
}

.ra-sr {
  position: absolute;
  left: -9999px;
}

@media (max-width: 720px) {
  .ra-image {
    width: 90%;
  }
}

.event-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  margin: 30px auto;
}

.event-button {
  display: inline-block;
  background: #dc4225;
  /* red background */
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
  /* subtle shadow */
  padding: 14px 20px;
  transform: skewX(0deg);
  text-align: center;
  cursor: pointer;
  transition: all 0.25s ease;
}

.event-button:hover {
  background: #b9361f;
  /* slightly darker on hover */
  transform: translateY(-3px);
}

.event-button span {
  display: inline-block;
  transform: skewX(0deg);
  font-family: "Fjalla One", Arial, sans-serif;
  letter-spacing: 0.02em;
  font-size: clamp(18px, 2vw, 22px);
  color: #fff;
  /* blue text */
  text-transform: uppercase;
}

@media (max-width: 768px) {
  .event-buttons {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
}

:root {
  --radius: 0px;
  /* No rounded corners */
}

/* 1) Make all corners sharp */
.nav a,
.cta,
.register .card,
.sponsor-card,
.board-card,
.board-card img {
  border-radius: 0 !important;
}

/* 2) Skew shells (the containers) */
.nav a,
.cta,
.register .card,
.sponsor-card,
.board-card {
  transform: skewX(0deg);
}

/* 3) Keep content readable by counter-skewing */
.nav a > *,
.cta > *,
.register .card > *,
.sponsor-card > *,
.board-card > * {
  transform: skewX(0deg);
  display: inline-block;
  color: #333;
  /* dark grey text */
  text-shadow: 0 0 4px #fff, 0 0 6px #fff;
  /* white glow/shadow for readability */
}

/* 4) MASK IMAGES so they look straight and fill the skewed shape */
.register .card,
.sponsor-card,
.board-card {
  overflow: hidden;
}

.sponsor-card > img,
.board-card > img {
  transform: skewX(0deg) scale(1.5);
  transform-origin: center;
  display: block;
}

/* If you ever place an image directly inside a skewed shell elsewhere: */
.skewed {
  transform: skewX(0deg);
  overflow: hidden;
}

.skewed > * {
  transform: skewX(0deg);
}

.skewed > img {
  transform: skewX(0deg) scale(1.15);
  display: block;
}

/* Board layout: two rows of 4 */
.board-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  justify-items: center;
}

.board-card {
  max-width: 260px;
}

/* --- UN-SKEW Board Section Only --- */
.board-card,
.board-card > *,
.board-card img {
  transform: none !important;
  /* remove skew */
  text-shadow: none !important;
  /* remove white glow text-shadow */
}

/* Reset board card content styling for clean look */
.board-card {
  overflow: visible !important;
  /* remove skew mask */
}

.board-card img {
  transform-origin: center;
  scale: 1 !important;
  object-fit: cover;
  width: 100%;
  height: auto;
}

/* Responsive Board Grid */
.board-grid {
  display: grid;
  grid-template-columns: 1fr;
  /* mobile default: 1 column */
  gap: 24px;
  justify-items: center;
}

/* Tablets (≥600px): 2 per row */
@media (min-width: 600px) {
  .board-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktops (≥900px): 3 per row */
@media (min-width: 900px) {
  .board-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Large screens (≥1200px): 4 per row */
@media (min-width: 1200px) {
  .board-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  #event-days {
    margin: 30px 0;
  }
}

.homeSocial .container > div {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 20px 0;
}

.about ol {
  margin: 0;
  background: white;
  transform: skewX(0deg);
  padding-left: 1.25em;
  display: grid;
  gap: 12px;
  font-size: clamp(16px, 2.4vw, 20px);
  line-height: 1.7;
  color: var(--text-on-light);
  list-style: none; /* removes numbering */
}

.about ol li {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0));
  padding: 12px 12px 12px 16px;
  border-radius: calc(var(--radius) / 1.5);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
  text-align: center;
}

.program {
  padding-block: var(--section-pad);
  background: ;
  color: var(--text-on-light);
}

.program .container {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* ABOUT SECTION */
.about-list {
  margin: 0;
  background: white;
  padding-left: 1.25em;
  display: grid;
  gap: 12px;
  font-size: clamp(16px, 2.4vw, 20px);
  line-height: 1.7;
  color: var(--text-on-light);
  list-style: none;
}

.about-list li {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0));
  padding: 12px 12px 12px 16px;
  border-radius: calc(var(--radius) / 1.5);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
  text-align: center;
}

/* PROGRAM SECTION */
.program-section {
  padding-block: var(--section-pad);
  color: var(--text-on-light);
}

.program-container {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.program-grid {
  display: grid;
  gap: clamp(16px, 3vw, 32px);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: start;
}

.program-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(18px, 3.5vw, 28px);
}

.program-badge {
  display: inline-block;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: var(--shadow);
  padding: 10px 14px;
  margin-bottom: 12px;
  transform: skewX(0deg);
}

.program-badge span {
  display: inline-block;
  transform: skewX(0deg);
  font-family: "Fjalla One", Arial, sans-serif;
  letter-spacing: 0.02em;
  font-size: clamp(22px, 3.6vw, 32px);
}

.program-list {
  margin: 0;
  padding: 35px;
  list-style: none;
  display: grid;
  gap: 18px;
}

.program-list li {
  display: flex;
  align-items: flex-start;
  gap: 25px;
}

.program-list li strong {
  font-size: 20px;
}

.program-list li img {
  width: 100px;
  height: 100px;
  flex-shrink: 0;
}

.program-list li div p {
  margin: 0.5em 0;
}

.program-button {
  display: inline-block;
  background: #000;
  width: 100%;
  text-align: center;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: var(--shadow);
  /* padding: 10px 14px; */
  padding: 0 14px;
  transform: skewX(0deg);
  margin-top: 12px;
}

.program-button a {
  display: inline-block;
  padding: 12px 24px;
  color: #fff;
  font-family: Arial, sans-serif;
  letter-spacing: 0.03em;
  text-decoration: underline;
  font-size: 24px;
}

.program-button a .date {
  display: block;
  font-size: 10px;
  padding: 24px 24px 0;
  color: #fff;
  font-family: Arial, sans-serif;
  letter-spacing: 0.03em;
  text-decoration: underline;
}

/* PARTNERS */
.partners-inner {
  text-align: center;
}

.logo-row.dual-logos {
  display: flex;
  gap: 2rem;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.partner-logo {
  width: 200px;
  height: auto;
}

.partner-caption,
.partners-inner p {
  font-size: 1.5em;
  /* max-width: 900px; */
  margin: 2rem auto 0;
  line-height: 1.6;
}

/* SPONSORS */
.sponsors .container {
  max-width: 75%;
  margin: 0 auto;
}

.sponsor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  justify-content: center;
  align-items: center;
}

.sponsor-card a {
  display: block;
  line-height: 0;
}

.sponsor-card img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

/* Tablet */
@media (max-width: 768px) {
  .sponsor-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .partner-caption {
    font-size: 1.25em;
  }
}

/* Mobile */
@media (max-width: 480px) {
  .sponsor-grid {
    grid-template-columns: 1fr;
  }

  .partner-logo {
    width: 160px;
  }
}

/* Section */
#schedule-section {
  padding-block: var(--section-pad);
  background-image: url("images/speaker.png");
}

/* Badge */
.schedule-badge {
  display: inline-block;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: var(--shadow);
  padding: 10px 14px;
  margin-bottom: 20px;
}

.schedule-badge span {
  font-family: "Fjalla One", Arial, sans-serif;
  font-size: clamp(20px, 4vw, 28px);
  letter-spacing: 0.02em;
}

/* Schedule layout */
#schedule {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  padding: 45px;
  background: linear-gradient(
    to left,
    rgba(255, 255, 255, 0.25) 0%,
    rgba(255, 255, 255, 1) 100%
  );
}

.schedule-day {
  flex: 1 1 0;
  min-width: 300px;
  word-wrap: break-word;
}

#schedule h3 {
  margin-top: 0;
}

#schedule ul {
  padding-left: 20px;
  margin: 0;
}

/* Event Buttons */
.center-text {
  text-align: center;
}

.event-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  margin: 30px auto;
  padding-block: var(--section-pad);
}

.event-button {
  display: inline-block;
  background: #dc4225;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
  padding: 14px 20px;
  text-decoration: none;
  transition: all 0.25s ease;
}

.event-button:hover {
  background: #b9361f;
  transform: translateY(-3px);
}

.event-button span {
  font-family: "Fjalla One", Arial, sans-serif;
  letter-spacing: 0.02em;
  font-size: clamp(18px, 2vw, 22px);
  color: #fff;
  text-transform: uppercase;
}

/* Responsive */
@media (max-width: 768px) {
  #schedule {
    padding: 20px;
    gap: 16px;
  }

  .schedule-day {
    flex: 1 1 100%;
    min-width: unset;
  }

  .event-buttons {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
}

@media (max-width: 480px) {
  #schedule {
    padding: 15px;
  }

  #schedule ul li {
    font-size: 14px;
    line-height: 1.4;
  }
}

.site-footer {
  text-align: center;
  /* padding: 40px 20px; */
}

/* Social icons */
.footer-socials {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 20px 0;
  flex-wrap: wrap;
}

.footer-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* .footer-socials img {
  width: 30px;
  height: 30px;
} */

/* Logo */
.logo-white {
  max-width: 200px;
  margin: 20px auto 0;
  display: block;
}

/* Text */
.footer-text {
  font-size: 14px;
  line-height: 1.5;
  /* max-width: 700px; */
  margin: 0 auto;
}

/* Responsive */
@media (max-width: 480px) {
  .footer-socials {
    gap: 16px;
  }

  .logo-white {
    max-width: 160px;
  }

  .footer-text {
    font-size: 13px;
  }
}

/* Section background */
#keep-in-touch {
  position: relative;
  padding-block: var(--section-pad);
  background-color: #002f4b;
  background-image: url("images/tinylogo.svg");
  background-size: 40px 40px;
  background-repeat: repeat;
  background-position: center;
  overflow: hidden;
}

.keep-in-touch-container {
  position: relative;
  z-index: 1;
}

/* Gradient card */
.keep-card {
  position: relative;
  background: linear-gradient(
    135deg,
    rgba(220, 66, 37, 0.92),
    rgba(140, 30, 17, 0.95)
  );
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: var(--shadow);
  padding: clamp(22px, 5vw, 44px);
  color: #000;
}

.keep-card-inner {
  text-align: center;
}

/* Title */
.keep-title {
  margin: 0 0 10px;
  font-family: "Fjalla One", Arial, sans-serif;
  font-size: clamp(24px, 5vw, 44px);
  letter-spacing: 0.02em;
  color: #fff;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* Description */
.keep-description,
.keep-in-touch-container p {
  margin: 0 0 14px;
  font-size: clamp(16px, 2.4vw, 20px);
  line-height: 1.7;
  color: #000;
}

/* Embed wrapper (responsive iframe) */
.embed-wrap {
  position: relative;
  width: 100%;
  padding-top: 50%; /* 2:1 ratio */
}

.embed-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Mobile form stacking safeguard */
@media (max-width: 720px) {
  #keep-in-touch form > div > div:nth-child(1),
  #keep-in-touch form > div > div:nth-child(2) {
    grid-template-columns: 1fr !important;
  }
}

#countdown {
  padding-block: var(--section-pad);
  background: #f9f9f9;
}

.countdown-container {
  position: relative;
}

/* Countdown card */
.countdown-card {
  background: #04304b;
  color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  padding: clamp(18px, 4vw, 32px);
  transform: skewX(0deg);
  overflow: hidden;
}

.countdown-card-inner {
  text-align: center;
  transform: skewX(0deg);
}

/* Skewed header badge */
.countdown-badge {
  display: inline-block;
  background: #fff;
  color: #111;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: var(--shadow);
  padding: 10px 14px;
  transform: skewX(0deg);
  margin-bottom: 14px;
}

.countdown-badge span {
  display: inline-block;
  transform: skewX(0deg);
  font-family: "Fjalla One", Arial, sans-serif;
  letter-spacing: 0.02em;
  font-size: clamp(18px, 3.6vw, 24px);
}

/* Timer grid */
#timer {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(90px, 1fr));
  align-items: stretch;
}

.time-block {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 14px;
  text-align: center;
  transform: skewX(0deg);
}

.time-block .t-num {
  font-size: clamp(28px, 6vw, 44px);
  font-weight: 800;
  line-height: 1;
  color: #b93f2b;
}

.time-label {
  opacity: 0.9;
  font-size: 13px;
  margin-top: 6px;
}

/* Responsive adjustments */
@media (max-width: 720px) {
  #timer {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
  }
}

.ra-section {
  background: linear-gradient(135deg, #d62a1a 0%, #032f4a 100%);
  padding: min(6vw, 48px) 16px;
  color: #fff;
}

.ra-wrap {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.ra-wrap h2 {
  margin: 0 0 14px;
  font-family: "Fjalla One", Arial, sans-serif;
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.ra-image {
  width: 40%;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  cursor: zoom-in;
}

.ra-link {
  display: inline-block;
  margin-top: 14px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 10px;
  color: #fff;
  text-decoration: none;
  backdrop-filter: blur(2px);
  transition: transform 0.12s ease, background 0.12s ease;
}

.ra-link:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.18);
}

/* Lightbox */
.ra-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.ra-lightbox.is-open {
  display: flex;
}

.ra-lightbox__img {
  max-width: 92vw;
  max-height: 88vh;
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
}

.ra-lightbox__close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  backdrop-filter: blur(2px);
  padding: 0;
}

.ra-lightbox__close:hover {
  background: rgba(255, 255, 255, 0.28);
}

.ra-sr {
  position: absolute;
  left: -9999px;
}

/* Responsive */
@media (max-width: 720px) {
  .ra-image {
    width: 90%;
  }
}

p:empty {
  display: none;
}

.board-card > img {
  filter: grayscale(1) contrast(1.2);
}

.board-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  margin-bottom: 30px;
}

.board-card h3 {
  font-family: "Fjalla One", Arial, sans-serif;
  font-size: 1.2rem;
  margin: 8px 0;
}

.board-card .role {
  font-weight: 500;
  font-size: 0.95rem;
  margin: 4px 0 8px;
  color: #555;
}

.board-card .bio,
.board-card p {
  font-size: 0.9rem;
  line-height: 1.5;
  color: #333;
}

.board-card a img {
  margin: 6px 0 12px;
}

.board-staff .content h2 {
  margin-top: 0;
  padding-top: 40px;
}

/* Speaker Guide Button */
.event-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  margin: 0 auto;
  padding-block: var(--section-pad);
}

.event-button {
  display: inline-block;
  background: #dc4225;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
  padding: 14px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.25s ease;
}

.event-button:hover {
  background: #b9361f;
  transform: translateY(-3px);
}

.event-button span {
  display: inline-block;
  font-family: "Fjalla One", Arial, sans-serif;
  letter-spacing: 0.02em;
  font-size: clamp(18px, 2vw, 22px);
  color: #fff;
  text-transform: uppercase;
}

/* Responsive */
@media (max-width: 768px) {
  .board-staff .board-grid {
    gap: 20px;
  }

  .event-buttons {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
}

.main-navigation.toggled {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  background: #dc4225;
  align-items: flex-start;
}

.main-navigation.toggled .menu-toggle {
  position: absolute;
  top: 15px;
  right: 15px;
}

.main-navigation.toggled ul {
  padding-top: 100px;
  padding-left: 30px;
}
.main-navigation.toggled ul li {
  margin-bottom: 15px;
}
.main-navigation.toggled ul li a {
  background: transparent;
  box-shadow: none;
  border: none;
  font-size: 25px;
}

.speakersMain {
  padding: 27px 0 0;
  background-color: #fff;
  background-image: url(images/tinylogo-red.png);
  background-repeat: repeat;
  background-size: 25px auto;
  background-attachment: fixed;
  color: var(--text-on-light);
}

.speakersMain .board-staff {
  background-color: transparent;
}

.speakersMain .board-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.speakersMain .board-card {
  background: rgba(
    255,
    255,
    255,
    0.9
  ); /* slightly translucent to show logo pattern */
  border: 1px solid rgba(0, 0, 0, 0.08);
  padding: 2rem;
  text-align: center;
  width: 100%;
  max-width: 700px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease;
  margin-bottom: 0;
}

.speakersMain .container {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
  padding: 1rem 0;
}

.speakersMain .container.content {
  background-color: white;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.speakersMain .container.content h2 {
  font-family: "Fjalla One", sans-serif;
  color: var(--accent-dark);
  text-transform: uppercase;
  margin-bottom: 0.5em;
  text-align: center;
}

.speakersMain .container.content p {
  max-width: 800px;
  margin: 0 auto 1.5em;
  text-align: center;
}

.speakersMain .board-card:hover {
  transform: translateY(-5px) !important;
}

.speakersMain .board-card h3 {
  font-family: "Fjalla One", sans-serif;
  margin-bottom: 0.3em;
  color: var(--accent-dark);
  margin: 25px 0 0;
}

.speakersMain .board-card p strong {
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 1em;
  max-width: 800px;
  margin: 0 auto 1.5em;
  text-align: center;
}

.speakersMain .board-card p {
  text-align: left;
  margin: 0 auto;
  max-width: 600px;
  font-size: 0.95rem;
  margin-bottom: 1em;
}

.speakersMain .board-card p:last-child {
  margin-bottom: 0;
}

.speakersMain .board-card img {
  width: 30px;
  height: 30px;
  margin-bottom: 1em;
  filter: grayscale(1) contrast(1.2);
}

.speakersMain .board-card > img {
  width: 200px;
  height: auto;
  margin-bottom: 1rem;
  filter: grayscale(1) contrast(1.2);
}

@media (max-width: 600px) {
  .speakersMain .board-card > img {
    width: 150px;
  }
}

@media (max-width: 991px) {
  .footer-socials a {
    width: 40px;
  }
}

.solutions-workshop {
  position: relative;
  padding-block: var(--section-pad);
  background: url("images/hack.png") center / cover no-repeat;
  color: var(--text-on-light);
}

.solutions-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.25));
  z-index: 0;
}

.solutions-container {
  position: relative;
  z-index: 1;
}

.solutions-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  padding: clamp(22px, 4.5vw, 36px);
  max-width: 860px;
  transform: skewX(0deg);
  overflow: hidden;
}

.solutions-header {
  transform: skewX(0deg);
  color: #111;
}

.solutions-title {
  display: block;
  font-family: "Fjalla One", Arial, sans-serif;
  background: #fff;
  color: #111;
  border: 4px solid #dc4225;
  padding: clamp(12px, 2vw, 28px);
  font-weight: 800;
  font-size: clamp(20px, 2.5vw, 32px);
  text-align: center;
  box-shadow: 0 6px 18px rgba(4, 48, 75, 0.4);
}

.solutions-card h4 {
  margin: 18px 0;
  font-size: clamp(16px, 2.4vw, 20px);
  line-height: 1.7;
  font-family: "Special Gothic", "Gothic A1", system-ui, -apple-system, Segoe UI,
    Roboto, Inter, Arial, sans-serif;
  font-weight: normal;
}

.solutions-card h3 {
  font-family: "Fjalla One", Arial, sans-serif;
  margin: 16px 0 8px;
  font-size: 20px;
  color: #dc4225;
}

.solutions-card p {
  margin: 0 0 12px;
  font-size: 16px;
  line-height: 1.7;
}

.solutions-list {
  margin: 0 0 18px;
  padding-left: 1.1em;
  display: grid;
  gap: 10px;
  font-size: clamp(16px, 2.4vw, 20px);
  line-height: 1.7;
}

.solutions-button-wrap {
  margin-top: 2rem;
}

.solutions-button {
  display: inline-block;
  text-decoration: none;
  font-family: "Fjalla One", Arial, sans-serif;
  background: #fff;
  color: #111;
  border: 4px solid #dc4225;
  padding: clamp(12px, 2vw, 28px);
  font-weight: 800;
  font-size: clamp(20px, 2.5vw, 32px);
  box-shadow: 0 6px 18px rgba(4, 48, 75, 0.4);
}

.logo-wm {
  max-width: 180px;
  margin: 1rem auto;
  display: block;
  position: absolute;
  top: 18px;
  right: 18px;
  width: 100px;
  height: auto;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.25));
}

.wallMain {
  padding: 24px;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #e8eefc;
}

.mainWrap.wrap {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  gap: 16px;
  padding: 1rem;
}

.mainWrap h1 {
  font-family: "Fjalla One", system-ui, -apple-system, Segoe UI, Roboto, Arial,
    sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 38px;
  margin: 0 0 4px;
}

.polaroid {
  display: grid;
  grid-template-rows: auto auto;
  background: #fff;
  border: 2px solid #ccc;
  padding: 8px;
  margin: 1rem auto;
  max-width: 400px;
  position: relative;
}

.square {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #000;
  position: relative;
}

.role-badge {
  display: none;
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  padding: 0.2rem 0.5rem;
  font-weight: bold;
  color: #fff;
  border-radius: 4px;
  background-color: var(--role-color, #999);
}

.mainWrap .caption {
  display: flex;
  justify-content: space-between;
  padding-top: 0.5rem;
}

#snap {
  display: none;
}

.stage {
  margin-top: 1rem;
}

#previewPolaroid {
  display: none;
}

#downloadLink {
  display: none;
  margin-top: 0.5rem;
}

.status.ok {
  color: green;
}
.status.err {
  color: red;
}

.debug {
  display: none;
  white-space: pre-wrap;
  background: #eee;
  padding: 0.5rem;
  margin-top: 0.5rem;
}

.controls {
  margin: 0.5rem 0;
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.mainWrap button {
  padding: 0.5rem 1rem;
  font-size: 1rem;
  cursor: pointer;
}

/* Polaroid look */
.stage {
  display: grid;
  gap: 18px;
}
.polaroid {
  --role-color: #ffffff;
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  background: #fff;
  border-radius: 10px;
  padding: 12px 12px 36px; /* thicker bottom space */
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35), 0 10px 20px rgba(0, 0, 0, 0.25);
  outline-offset: 4px; /* colored frame just outside the white */
}
.polaroid.roleBorder {
  outline: 8px solid var(--role-color);
}

/* Square media area, slightly smaller */
.square {
  width: 80%;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
  position: relative;
}
/* Mirror the live video so it feels natural */
video.square {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scaleX(-1);
}
img.square {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Top-left role badge (DOM for live preview) */
.role-badge {
  position: absolute;
  left: 8%;
  top: 6%;
  background: var(--role-color, #999);
  color: #0b1320;
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 700;
  font-family: "Fjalla One", system-ui, -apple-system, Segoe UI, Roboto, Arial,
    sans-serif;
  transform: skew(-10deg);
  transform-origin: center;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
  display: none;
  user-select: none;
}

/* Bottom caption inside polaroid */
.mainWrap .caption {
  width: auto;
  margin-top: 10px;
  background: #fff;
  color: #0b1320;
  border-radius: 8px;
  padding: 10px 14px;
  text-align: center;
  font-family: "Fjalla One", system-ui, -apple-system, Segoe UI, Roboto, Arial,
    sans-serif;
  display: grid;
  gap: 2px;
}
.mainWrap .caption .name {
  font-size: 22px;
  font-weight: 800;
}
.mainWrap .caption .date {
  font-size: 16px;
  opacity: 0.85;
}

/* Form & controls */
.mainWrap form.row {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.mainWrap input[type="text"],
.mainWrap select {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #334;
  background: #121a2e;
  color: #e8eefc;
}
.mainWrap button {
  padding: 12px 16px;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  background: #4e7cff;
  color: #fff;
  font-weight: 600;
}
.mainWrap button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.controls {
  display: flex;
  gap: 10px;
  align-items: center;
}
.mainWrap label {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 14px;
  opacity: 0.95;
}

.status {
  min-height: 1.5em;
  opacity: 0.97;
  white-space: pre-wrap;
}
.ok {
  color: #80ffa4;
}
.err {
  color: #ff8b8b;
}
.debug {
  font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: #0f1a33;
  padding: 10px;
  border-radius: 8px;
  display: none;
}

.mainEmail {
  margin: 0;
  padding: 0;
  background-color: #032f4a;
  color: #ffffff;
  font-family: Arial, sans-serif;
  line-height: 1.6;
  overflow: hidden;
}

.mainEmail .header {
  text-align: center;
}

.mainEmail .banner {
  width: 100%;
  max-width: 600px;
  height: auto;
  display: block;
  margin: 0 auto;
}

.mainEmail .container {
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
}

.mainEmail hr {
  border: none;
  border-top: 3px solid #d62a1a;
  margin: 20px 0;
  background-color: transparent;
}

.mainEmail .section-title {
  font-weight: bold;
}

.mainEmail .link {
  color: #d62a1a;
  text-decoration: none;
}

.mainEmail .signature {
  font-weight: bold;
  margin-top: 30px;
  line-height: 2;
}

.mainEmail .social-links {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 30px 0;
}

.mainEmail .social-links img {
  width: 30px;
  height: 30px;
  display: block;
}

.hackathon-header .hackathon-title {
  display: inline-block;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: var(--shadow);
  padding: 10px 14px;
  margin: 12px 0;
  font-family: "Fjalla One", Arial, sans-serif;
  letter-spacing: 0.02em;
  font-size: clamp(18px, 3.6vw, 24px);
}

.solutions-card ul {
  padding: 0;
  margin: 0 0 18px;
  padding-left: 1.1em;
  display: grid;
  gap: 8px;
  font-size: 16px;
  line-height: 1.7;
}

.about-council .board-staff .event-buttons {
  padding: 0;
  margin: 30px auto;
}

.solutions-card ul.listSpace {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

@media screen and (min-width: 1200px) {
	.solutions-card ul.listSpace{
		margin-left: 25px;
	}
	.solutions-card ul.bigList{
	   font-size: clamp(16px, 2.4vw, 20px);
       line-height: 1.7;	
	}
  .about-council .board-grid .board-card {
    padding: 16px;
  }
  .solutions-container .solutions-card .solutions-list:last-of-type {
    padding-left: 50px;
  }
}

body:not(.home) .site-footer {
  display: none;
}