/* Page colors and basic reset */
:root{
	/* Use rgba values to enable translucency. Adjust the alpha (last number) between 0 (transparent) and 1 (opaque). */
	--bg: #3b013b; /* page background (semi-transparent purple) */
	--accent: #e0a72b; /* boxes and headings (semi-transparent orange) */
	--text: #000000;
	--muted: rgba(0,0,0,0.15);
	--box-border: rgba(255,255,255,0.08);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
	margin:0;
	font-family: 'Segoe UI', Roboto, Arial, sans-serif;
	/* Use the translucent background variable */
	background: var(--bg);
	color:var(--text);
	line-height:1.5;
	/* Optional: put a subtle background image or gradient behind the translucent theme */
	/* background-image: linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.15)); */
}

/* Skip link (accessibility) */
.skip-link{
	position:absolute;
	left:-999px;
	top:auto;
	width:1px;
	height:1px;
	overflow:hidden;
}
.skip-link:focus{
	position:static;
	left:auto;
	top:auto;
	display:inline-block;
	background:rgb(255, 255, 255);
	color:var(--bg);
	padding:8px 12px;
	margin:8px;
	border-radius:4px;
	text-decoration:none;
}

/* Header */
.site-header{
	text-align:center;
	padding:28px 12px;
}
/* Make header slightly translucent + frosted effect */
.site-header h1{
	margin:0 auto;
	display:inline-block;
	padding:18px 48px;
	/* use the translucent accent */
	background: var(--accent);
	color:var(--bg);
	/* apply backdrop blur for a frosted glass look (browser support dependent) */
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	/* keep background clipped to the padding box so borders don't get blurred */
	background-clip: padding-box;
	border-radius:8px;

	/* responsive font size */
	font-size: clamp(28px, 5vw, 48px);
	letter-spacing:8px;
	text-transform:lowercase;
}

/* Main layout: two columns on wide screens */
.page-wrap{
	max-width:1000px;
	margin:28px auto;
	display:grid;
	/* fluid two-column: main content + sidebar (sidebar max 360px or 40%) */
	grid-template-columns: 1fr min(360px, 40%);
	gap:28px;
	padding:0 16px 40px;
	align-items:start;
}

/* Make boxes translucent with frosted blur + subtle border */
.box{
	background: var(--accent); /* fallback translucent color */
	padding:18px;
	color:var(--bg);
	border-radius:6px;
	/* frosted glass */
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	/* subtle border so edges are visible on busy backgrounds */
	border: 1px solid var(--box-border);
	/* softened shadow */
	box-shadow: 0 8px 0 rgba(0,0,0,0.12);
}

/* If you prefer a stronger transparent effect, reduce the alpha in :root --accent,
   or set an overall opacity on .box (note: opacity affects children). */

.left-box{order:1}
.right-box{order:2}

.lead{color:var(--bg);}
.lead-figure{
	float:left;
	margin:0 16px 12px 0;
	max-width:240px;
	width:100%;
}
.lead-img{
	/* responsive image: scale within figure */
	width:100%;
	height:auto;
	display:block;
	border:6px solid #fff;
	box-shadow:0 4px 0 var(--muted);
	border-radius:4px;
}

.table-heading{margin-top:24px; color:var(--bg);}
.costume-table{width:100%; border-collapse:collapse; background:rgba(255,255,255,0.95); color:var(--text); border-radius:4px; overflow:hidden;}
.costume-table th, .costume-table td{padding:10px; border:1px solid #c9b27a; vertical-align:top}
.costume-table thead th{background:#f3df9a}

.right-box h2{margin-top:0; color:var(--bg)}
.aside-img{width:100%; height:auto; display:block; margin:8px 0 12px; border:6px solid rgba(0,0,0,0.15); border-radius:4px}

.site-footer{max-width:1000px; margin:0 auto 40px; color:#eee; padding:8px 16px}
.site-footer .footer-inner{background:transparent; padding:6px 0; text-align:center; color:#f4eedd}

/* Responsive: stack columns on narrow screens */
@media (max-width:900px){
	.page-wrap{
		grid-template-columns: 1fr;
	}
	.lead-figure{
		float:none;
		max-width:100%;
		margin:0 0 12px;
	}
	.site-header h1{font-size:36px; letter-spacing:6px}
	.right-box{order:3}
	.left-box{order:1}
	.box{padding:14px}
}

/* Small screens tweaks */
@media (max-width:480px){
	.site-header h1{padding:12px 20px; font-size:28px}
	.page-wrap{gap:18px; padding-bottom:28px}
	.costume-table th, .costume-table td{padding:8px}
}

/* High-density/print friendly tweaks */
@media print{
	.site-header, .site-footer{display:none}
	body{background:#fff; color:#000}
	.box{background:transparent; box-shadow:none; padding:0; -webkit-backdrop-filter: none; backdrop-filter: none;}
	.costume-table{background:transparent}
}
/* Added translucent / frosted styles */
.translucent-box {
	background-color: rgba(218, 165, 32, 0.85); /* gold with 85% opacity */
	color: #3b0633;              /* dark purple text color */
	display: inline-block;
	padding: 18px 48px;
	border-radius: 10px;
	font-size: 32px;
	font-weight: 700;
	letter-spacing: 12px;        /* space between letters*/
	text-transform: lowercase;   /* show 'halloween' in lowercase */
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  }
  
  /* Frosted glass option (blurs content behind the box) */
  .frosted-box {
	background-color: #ffb7003f; /* more transparent so blur shows */
	color: #88117681;
	display: inline-block;
	padding: 18px 48px;
	border-radius: 10px;
	font-size: 32px;
	font-weight: 700;
	letter-spacing: 12px;
	text-transform: lowercase;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  }