/* ==========================================================================
   Cape Cod Bass — base stylesheet
   Palette: Moss & tackle
   ========================================================================== */

:root {
  /* Color */
  --color-bg:          #F5F1E6;
  --color-bg-alt:      #ECE6D4;
  --color-primary:     #4B5D3A;   /* headings, nav, primary buttons */
  --color-primary-dark:#37452A;   /* hover states */
  --color-moss:        #8A9A5B;   /* secondary accents, borders */
  --color-accent:      #B5502F;   /* CTAs, highlights, badges */
  --color-text:        #2B2B22;
  --color-text-muted:  #6B6B58;
  --color-border:      #D8D0B8;
  --color-white:       #FFFFFF;

  /* Type */
  --font-heading: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body:    'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'IBM Plex Mono', monospace;

  /* Scale */
  --step-0: 1rem;
  --step-1: 1.25rem;
  --step-2: 1.75rem;
  --step-3: 2.5rem;
  --step-4: 3.5rem;

  /* Layout */
  --max-width: 1100px;
  --radius: 3px;
  --border-width: 1px;
}

/* ---- Reset (minimal) ---- */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, p, figure { margin: 0; }
img { max-width: 100%; display: block; }

/* ---- Base ---- */
html { font-size: 100%; }
body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
}

a {
  color: var(--color-primary);
  text-decoration: none;
}
a:hover { color: var(--color-accent); }

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.1;
  text-wrap: balance;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p {
	text-wrap: pretty;
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.text-muted { color: var(--color-text-muted); }

.info {
  padding: var(--step-1);
  border: 1px solid var(--color-moss);
  border-radius: var(--radius);
  margin-block-end: var(--step-0);
  background-color: var(--color-bg-alt);
  color: var(--color-primary);
}

.error {
	color: var(--color-accent); 
	border: 1px solid var(--color-accent);
}

/* ---- Layout ---- */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.site-header {
  background: var(--color-primary);
  border-bottom: 4px solid var(--color-accent);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.site-header .logo {
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  max-width: 30rem;
}

.main-nav ul, .list-nav ul {
  display: flex;
  gap: 1.75rem;
  list-style: none;
  padding: 0;
}
.main-nav a, .list-nav a {
  color: var(--color-bg);
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.main-nav a:hover { color: var(--color-accent); }

.list-nav ul {
	flex-direction: column;
}

/* ---- Hero ---- */
.hero {
  position: relative;
  padding: var(--step-4) 0;
  border-bottom: var(--border-width) solid var(--color-border);
  background-image: linear-gradient(180deg, rgba(43,43,34,0.35) 0%, rgba(43,43,34,0.8) 100%), var(--hero-image);
  background-size: cover;
  background-position: center 65%;
  background-repeat: no-repeat;
  color: var(--color-white);
}
.hero h1 {
  max-width: 21ch;
  color: var(--color-white);
}
.hero p.lede {
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.85);
  max-width: 50ch;
  margin-top: 1rem;
}

/* ---- Buttons ---- */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  border: var(--border-width) solid transparent;
  cursor: pointer;
  text-align: center;
}
.btn-primary {
  background: var(--color-accent);
  color: var(--color-white);
}
.btn-primary:hover { background: #963f24; color: var(--color-white); }

.btn-secondary {
  background: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.btn-secondary:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

/* ---- Cards ---- */
.card {
  background: var(--color-white);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
}

/* ---- Tables (results / scoreboard) ---- */
table.scoreboard {
  width: 100%;
  border-collapse: collapse;
}
table.scoreboard th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: 0.5rem;
}
table.scoreboard td {
  padding: 0.75rem 0;
}
table.scoreboard tr {
  border-bottom: var(--border-width) solid var(--color-border);
}
table.scoreboard tr:last-child {
  border-bottom: none;
}
table.scoreboard td.weight {
  font-family: var(--font-mono);
  color: var(--color-accent);
}

/* ---- Breadcrumbs ---- */
.breadcrumbs {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-bottom: var(--step-1);
}
.breadcrumbs a { color: var(--color-primary); }
.breadcrumbs a:hover { color: var(--color-accent); }
.breadcrumbs span { color: var(--color-text-muted); }

/* ==========================================================================
   Page section rhythm (Home + reused elsewhere)
   ========================================================================== */
.page-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--step-4);
  padding: var(--step-1	) 0;
}
.page-section h2 {
  margin-bottom: var(--step-1);
}
.page-section h3 {
  font-size: var(--step-1);
  margin-bottom: 0.75rem;
}

/* ----  News ---- */
.main-article {
	background-color: var(--color-white);
	padding: var(--step-0);
	margin-inline: auto;
   * {
   	margin-bottom: var(--step-0);
   }
   p {
   		max-width: 75ch;
	}
}
.news-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	padding-block: var(--step-1);
	.card {
		.card-title {
			font-size: var(--step-1);	
		}
	}
}


.sidebar-layout {
	display: flex;
	flex-wrap: wrap;
	gap: var(--step-3);
	margin-bottom: var(--step-3);
	.page-layout {
		flex: 999 1 400px;
		gap: var(--step-1);
		.main-article {
			border: var(--border-width) solid var(--color-border);
			border-radius: var(--radius);
		}
	}
	.page-wrapper {
		gap: var(--step-1);		
	}
	aside {
		flex: 1 1 280px;
		gap: var(--step-1);
	}
}

.latest-news {
  display: grid;
  gap: 1.5rem;
}
.news-item {
  background: var(--color-white);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
}
.news-item h3 {
  font-size: 1.15rem;
  text-transform: none;
  letter-spacing: normal;
  margin-bottom: 0.25rem;
}
.news-item h3 a { color: var(--color-primary); }
.news-item h3 a:hover { color: var(--color-accent); }
.news-date {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.news-description {
  margin-top: 0.5rem;
  color: var(--color-text-muted);
}
.news-article-author {
	display:flex;
	gap: var(--step-0);
	border-top: 1px solid var(--color-bg-alt);
	padding-block-start: var(--step-0);
	.author {
		font-size: var(--step-1);
		font-weight: 700;
		color: var(--color-primary):
	}
}
.multi-col-grid {
	display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: var(--step-0);
}
/* ---- Standings ---- */
.standings-top-anglers {
  list-style: none;
  padding: 0;
  counter-reset: standing;
  background: var(--color-white);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 1.5rem;
}
.standings-top-anglers li {
  counter-increment: standing;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.25rem;
  border-bottom: var(--border-width) solid var(--color-border);
}
.standings-top-anglers li:last-child { border-bottom: none; }
.standings-top-anglers li::before {
  content: counter(standing);
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--color-accent);
  margin-right: 0.75rem;
}
.standing-angler { flex: 1; font-weight: 600; }
.standing-points {
  font-family: var(--font-mono);
  color: var(--color-accent);
}

.standings-featured {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.25rem;
}
.featured-stat {
  background: var(--color-white);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.25rem;
  text-align: center;
}
.featured-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: 0.5rem;
}
.featured-value {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--step-2);
  color: var(--color-accent);
  font-weight: 600;
}
.featured-angler {
  display: block;
  margin-top: 0.25rem;
  font-weight: 600;
}

/* ---- Upcoming Tournaments ---- */
.upcoming-list {
  list-style: none;
  padding: 0;
  background: var(--color-white);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.upcoming-item {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.85rem 1.25rem;
  border-bottom: var(--border-width) solid var(--color-border);
}
.upcoming-item:last-child { border-bottom: none; }
.upcoming-date {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--color-accent);
  min-width: 4.5rem;
}
.upcoming-item a {
  font-weight: 600;
  color: var(--color-primary);
}
.upcoming-item a:hover { color: var(--color-accent); }
.upcoming-location {
  margin-left: auto;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* ---- "See all" links, shared across sections ---- */
.see-all-link {
  display: inline-block;
  margin-top: 1rem;
  font-weight: 600;
  color: var(--color-primary);
}
.see-all-link:hover { color: var(--color-accent); }

/* ==========================================================================
   Schedule / Trail Details / Tournament Details
   ========================================================================== */

/* ---- Two-column layout: main content + sidebar ---- */
.schedule-layout, .members-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--step-3);
  align-items: start;
  margin-bottom: var(--step-3);
}


/* ---- Trail header ---- */
.trail-header {
  margin-bottom: var(--step-2);
}
.trail-description {
  color: var(--color-text-muted);
  margin-top: 0.5rem;
  max-width: 60ch;
}

/* ---- Tournament list (same row treatment as .upcoming-list) ---- */
.tournament-list {
  list-style: none;
  padding: 0;
  background: var(--color-white);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.tournament-item {
  padding: 1rem 1.25rem;
  border-bottom: var(--border-width) solid var(--color-border);
}
.tournament-item:last-child { border-bottom: none; }

.tournament-info {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
}
.tournament-date {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--color-accent);
  min-width: 7rem;
}
.tournament-title {
  font-weight: 600;
  color: var(--color-primary);
}
.tournament-title:hover { color: var(--color-accent); }
.tournament-location {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* ---- Status badges ---- */
.badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius);
  margin-top: 0.5rem;
  color: var(--color-white);
}
.badge-upcoming  { background: var(--color-moss); }
.badge-processed { background: var(--color-primary); }
.badge-pending   { background: var(--color-accent); }

/* ---- Related news, nested under a tournament (currently unused --
   the per-tournament news feature was dropped, see decision log --
   harmless to keep or remove) ---- */
.tournament-news {
  margin-top: 0.5rem;
  padding-left: 0.75rem;
  border-left: 2px solid var(--color-border);
}
.tournament-news a {
  font-size: 0.9rem;
  color: var(--color-text-muted);
}
.tournament-news a:hover { color: var(--color-accent); }

/* ---- Sidebar: Past Trails ---- */
.sidebar, .schedule-sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--step-1);s
}
.schedule-sidebar h2 {
  font-size: var(--step-1);
  margin-bottom: 0.75rem;
}
.past-trails-list {
  list-style: none;
  padding: 0;
  background: var(--color-white);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.past-trails-list li {
  border-bottom: var(--border-width) solid var(--color-border);
}
.past-trails-list li:last-child { border-bottom: none; }
.past-trails-list a {
  display: block;
  padding: 0.65rem 1rem;
  color: var(--color-primary);
  font-weight: 600;
}
.past-trails-list a:hover {
  background: var(--color-bg-alt);
  color: var(--color-accent);
}

/* ==========================================================================
   Bylaws page
   ========================================================================== */
.bylaws-toc {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: var(--step-2);
  padding-bottom: 1rem;
  border-bottom: var(--border-width) solid var(--color-border);
}
.bylaws-toc a {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-primary);
}
.bylaws-toc a:hover { color: var(--color-accent); }

.bylaws-category {
  margin-bottom: var(--step-4);
  scroll-margin-top: 1rem;
}
.bylaws-category h2 {
  margin-bottom: 1rem;
}

.bylaw-item {
  margin-bottom: 1rem;
  padding: 0;
  overflow: hidden;
}
.bylaw-item summary {
  cursor: pointer;
  padding: 1rem 1.25rem;
  list-style: none;
}
.bylaw-item summary::-webkit-details-marker { display: none; }
.bylaw-item summary::before {
  content: '+';
  display: inline-block;
  width: 1.2rem;
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-weight: 600;
}
.bylaw-item[open] summary::before {
  content: '\2212';
}
.bylaw-item summary h3 {
  display: inline;
  font-size: 1.1rem;
  text-transform: none;
  letter-spacing: normal;
}
.bylaw-short-description {
  display: block;
  margin-top: 0.35rem;
  margin-left: 1.2rem;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}
.bylaw-text {
  padding: 0 1.25rem 1.25rem 1.25rem;
  border-top: var(--border-width) solid var(--color-border);
  line-height: 1.6;
}
.bylaw-text p {
  margin-top: 1rem;
  margin-bottom: 0;
}
.bylaw-text ol,
.bylaw-text ul {
  margin-top: 1rem;
  padding-left: 1.5rem;
}
.bylaw-text li {
  margin-bottom: 0.5rem;

}
/** Members Section **/
.members-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--step-3);
  align-items: start;
  margin-bottom: var(--step-3);
}
.member-details-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--step-1);
}

.member-classification-icon {
	max-height: 32px;
}

/*** ---- Forms ---- ***/
.form-layout {
	display: flex;
	flex-direction: column;
	gap: var(--step-1);
	max-width: 720px;
	width: 100%;
	margin-inline: auto;
	margin-block: var(--step-2);

}

.form-section {
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	margin-inline: auto;
	padding: var(--step-0) var(--step-1);
	margin-block-end: var(--step-1);
	h1 { 
		font-size: var(--step-3);
		margin-block-end: var(--step-0); 
	}
	h2 {
		font-size: var(--step-2);
		margin-block-end: var(--step-0); 
	}
}
	

.form-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--step-1);
	margin-block-end: var(--step-0);
}	

.form-group {
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

.form-group.full {
	grid-column: 1 / -1;
}
.form-checkbox-inline  {
	grid-column: 1 / -1;
	display: block;
	input[type=checkbox] {
		width: auto;
	}
}

.form-grid label {
	font-weight: 600;
}

.form-group .required {
	color: var(--color-accent);
}

.form-grid input, .form-grid textarea, .form-grid select {
	padding: calc(var(--step-0) * .75) var(--step-0);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	font: inherit;
	width: 100%;
}
.form-grid input:focus, .form-grid textarea:focus, .form-grid select:focus {
	outline: none;
	border: 1px solid var(--color-primary);
}

.form-actions {
	display: flex;
	justify-content: space-between;
}

.read-me {
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	background-color: var(--color-bg-alt);
	padding: calc(var(--step-0)*.5) var(--step-0);
}
.radio-inline {
	display: flex;
	gap: 1rem;
	input[type="radio"] {
		width: auto;
	}
}

.icon {
	max-width: 1.5rem;
	display: inline-block;
	fill-color: white;
	vertical-align: middle;
	margin: 0;
}

/* ---- Member profile card ---- */

.member-card {
  position: relative;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  border: 3px solid var(--color-primary);
  background-image: linear-gradient(180deg, rgba(43,43,34,0) 0%, rgba(43,43,34,0.15) 55%, rgba(43,43,34,0.92) 85%), var(--member-avatar);
  background-size: cover;
  background-position: center;
  background-color: var(--color-moss);
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
}

.member-card-flip-wrapper {
  margin: 0 auto;
}
.member-card,
.member-card-back {
  aspect-ratio: 340 / 440;
  /* remove any existing min-height: 440px on these two rules */
}
.member-card-back {
  background: var(--color-accent);
  border: 3px solid var(--color-primary);
  border-radius: 12px;
  overflow: hidden;
}

.member-card-back-body {
  padding: 1rem;
  text-align: center;
}

.member-card-back-name {
  font-size: 1.3rem;
  margin-bottom: 1rem;
  color: var(--color-white);
}

.baseball-stats-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
  border-radius: var(--radius);
}
.baseball-stats-table th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  padding: 0.6rem;
  border-bottom: var(--border-width) solid var(--color-border);
}
.baseball-stats-table td {
  text-align: right;
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-accent);
  padding: 0.6rem;
  border-bottom: var(--border-width) solid var(--color-border);
}
.baseball-stats-table tr:last-child th,
.baseball-stats-table tr:last-child td {
  border-bottom: none;
}

.flip-card-btn {
  display: block;
  margin: 1rem auto 0;
}
	
.member-card-header {
  background: var(--color-primary);
  padding: 0.65rem 1rem;
  text-align: center;
  color: var(--color-bg);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.member-card-body {
  margin-top: auto;
  text-align: center;
  padding: 1.5rem 1.25rem 0.5rem;
  color: var(--color-white);
}
.member-card-name {
  font-size: 1.5rem;
  margin: 0;
  color: var(--color-white);
}
.member-card-location {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 0.2rem;
}
.member-card-bio {
  font-size: 0.85rem;
  line-height: 1.5;
  margin-top: 0.75rem;
  color: rgba(255, 255, 255, 0.92);
}
.member-card-footer {
  background: var(--color-accent);
  color: var(--color-bg);
  text-align: center;
  padding: 0.5rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
}

/* ---- Manager Page Styles ----- */
table {
		border: none;
		border-collapse: collapse;
		width: 100%;
		background-color: var(--color-white);
		td {
			padding: calc(var(--step-0) * .5);
		}
		th {
			background-color: var(--color-bg-alt);
		}
	}
	.table-bordered {
		td, th {
			border: 1px solid var(--color-primary-dark);
		}
	}
	.pill {
		background-color: var(--bg-color, var(--color-primary-dark));
		border-radius: 100px;
		text-align: center;
		padding: calc(var(--step-0) * .25) calc(var(--step-0) * .75);
		color: var(--color, var(--color-white));
	}
	.open {
	--bg-color: var(--color-moss);
	}
	.closed {
	--bg-color: var(--color-accent);
	}
	.Pending {
	--bg-color: var(--color-border);
	--color: var(--color-primary-dark);
	}	

/* ---- Footer ---- */
.site-footer {
  background: var(--color-primary-dark);
  color: var(--color-bg);
  margin-top: var(--step-4);
  padding: var(--step-2) 0;
}
.site-footer a { color: var(--color-bg); }
.site-footer a:hover { color: var(--color-accent); }

/* ---- Directors ("Meet the Crew") ---- */
.director-card {
  text-align: center;
}
.director-photo img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--color-accent);
  margin: 0 auto 0.75rem;
  background: var(--color-moss);
}
.director-name {
  font-size: 1.1rem;
  margin: 0;
}
.director-title {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  margin: 0.25rem 0 0.75rem;
}
.director-duties {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* ---- Responsive ---- */
@media (max-width: 800px) {
  .schedule-layout {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 700px) {
  .site-header .container { flex-direction: column; gap: 1rem; align-items: flex-start; }
  .main-nav ul { flex-wrap: wrap; gap: 1rem; }
  h1 { font-size: var(--step-3); }
  .page-wrapper { gap: var(--step-3); }
  .upcoming-item { flex-wrap: wrap; }
  .upcoming-location { margin-left: 0; }
}