@media (max-width: 992px){

	.cta{
		flex-direction:column;
		align-items:flex-start;
	}
}

@media (max-width: 768px){

	/* TOP BAR */

	.topbar-inner{
		flex-wrap:wrap;
		gap:8px;
		padding:8px 4px;
	}

	.topbar-name{
		font-size:17px;
		letter-spacing:2px;
	}

	.topbar-link span{
		display:none;
	}

	.topbar-link{
		padding:8px 10px;
		font-size:16px;
	}

	/* HERO */

	.hero-banner{
		height:240px;
	}

	/* The map cannot be beside the text on a phone, so it goes behind it:
	   whole map visible, pinned to the top, words over the bottom half. */
	.hero-banner::after{
		padding:0;
		background-position:right top;
		background-size:contain;
		opacity:.85;
	}

	.hero-overlay{
		align-items:flex-end;
		background:linear-gradient(
			180deg,
			rgba(11,14,19,.15) 0%,
			rgba(11,14,19,.55) 38%,
			rgba(11,14,19,.90) 68%,
			rgba(11,14,19,.96) 100%
		);
	}

	.hero-kicker{
		font-size:10px;
		letter-spacing:3px;
	}

	.hero-title{
		font-size:38px;
		letter-spacing:3px;
	}

	.hero-subtitle{
		font-size:14px;
		line-height:1.6;
	}

	.brand{
		font-size:32px;
		letter-spacing:2px;
	}

	.section-heading{
		font-size:20px;
	}

	/* CONTENT */

	.container{
		padding-left:18px;
		padding-right:18px;
	}

	.subtitle{
		font-size:15px;
		line-height:1.7;
		text-align:left;
	}

	/* HOUSE RULES */

	.rules{
		grid-template-columns:1fr;
	}

	/* SELECTOR LAYOUT */

	.selector-group{
		flex-direction:column;
		border-left:none;
		margin-bottom:22px;
	}

	.selector-label{
		min-width:100%;
		margin-bottom:10px;
		padding-top:0;
		border-left:4px solid var(--accent);
		padding-left:10px;
	}

	/* BUTTON GRID */

	.selector-options{
		display:grid !important;
		grid-template-columns:1fr 1fr;
		gap:6px;
	}

	.selector-options.full-width{
		display:block !important;
	}

	/* FULL WIDTH */

	.command-box{
		width:100%;
		overflow:hidden;
		padding:16px;
	}

	/* BUTTONS */

	.option-btn{
		width:100%;
		min-width:0;
		padding:14px 8px;
		font-size:14px;
		margin:0;
	}

	.btn-elpis,
	.btn-elpis-ghost{
		flex:1 1 auto;
		justify-content:center;
	}

	/* ENDPOINT */

	#endpoint{
		font-size:13px;
		overflow-x:auto;
		white-space:nowrap;
		width:100%;
	}

	/* SUMMARY */

	.selection-summary{
		font-size:13.5px;
	}

	.address-grid{
		grid-template-columns:1fr;
	}

	/* GATES */

	.gates{
		grid-template-columns:1fr;
	}

	/* BLACKLIST */

	.bl-item > summary{
		flex-wrap:wrap;
		gap:8px 10px;
		padding:12px 14px;
	}

	.bl-index{
		font-size:17px;
		min-width:24px;
	}

	.bl-name{
		flex:1 1 auto;
		font-size:17px;
	}

	/* The tag drops to its own line rather than squeezing the name. */
	.bl-tag{
		order:3;
		flex:0 0 auto;
	}

	.bl-chev{
		order:2;
		margin-left:auto;
	}

	.bl-body{
		padding:0 14px 14px 14px;
	}

	/* A subscription URL and a button side by side leaves the URL a
	   sliver wide, so they stack and each takes the full row. */
	.bl-url,
	.copy-row{
		flex-direction:column;
		align-items:stretch;
		gap:8px;
	}

	.bl-url code,
	.copy-row code{
		/* The row is a column here, so the inherited flex:1 would stretch the
		   height rather than the width and crop the text to half a line. */
		flex:none;
		width:100%;
		font-size:11.5px;
	}

	.bl-note{
		white-space:normal;
		text-align:center;
	}

	/* SETUP PAGE */

	.doc-jump{
		flex-direction:column;
	}

	.doc-jump a{
		width:100%;
	}

	.doc-section{
		padding:18px;
	}

	/* FOOTER */

	footer{
		text-align:center;
	}

	.footer-title{
		margin-top:12px;
	}

	.footer-links{
		align-items:center;
	}
}