body {
        background-color: #fafafa;
	letter-spacing: 1.4px;
	font-family: Arial;
	color: #333;
	font-size: 0.9em;
	padding: 0;
	margin: 0;
}
h1 { font-size: 120%; color: #999999; text-align: center; }
h1 b { font-size: 120%; color: #bbb; }
h2 { font-size: 110%; color: #999; text-align: center; }
p { padding-bottom: 15px; text-align: left; line-height: 1.5em; }
a { text-decoration: none; color: #fafafa; }
a:hover { text-decoration: underline; color: #6B0F1A; }
a.back { text-decoration: none; color: #cccccc; font-size: 0.9em; }
a.back:hover { text-decoration: none; color: #6B0F1A; }
iframe { width: 100%; min-height: 500px; }
.dbred { color: #6B0F1A; }
div.bulletsep { 
	padding: 40px 0 20px 0;
	font-size: 18px; 
	color: #CCCCCC; 
	letter-spacing: 20px; 
}
li { padding-bottom: 3px; }
#body {
	margin-top: 40px;
	margin: 0px auto;
	padding: 0px 17px 10px 17px;
}
#header {
	position: static;
	white-space: no-wrap;
	margin: 0;
	padding: 0;
	background-color: #222222;
	display: table;
	width: 100%;
	height: 80px;
	position: static;
	z-index: 10000;
}

#header #navOFF {
	background-color: #222222;
	z-index: 1000;
}
#header #navON {
	background-color: #222222;
	z-index: 1000;
}
#header #navOFF .menuICON a { color: #dddddd; }
#header #navOFF .menuICON a:hover { color: #fafafa; text-decoration: none; }
#header #navON .menuICON a { color: #999999; }
#header #navON .menuICON a:hover { color: #fafafa; text-decoration: none; }

#header .donbutto {
	margin: 0 auto;
	width: 100%;
	text-align: center;
	margin-top: 25px;
	margin-bottom: 20px;
	min-width: 200px;
}
#header .donbutto img {
	max-width: 60%;
}

#header .logo {
	position: absolute;
	top: 0;
	left: 0;
	float: left;
	height: 100%;
	height: auto;
	max-width: 100px;
	float: left;
	margin: 5px;
	margin-bottom: 0;
}
#header .logo a { color: #eeeeee; }
#header .logo a:hover { color: #ffffff; text-decoration: none; }

#header .menuICON {
	position: relative;
	float: right;
	margin-top: -90px;
	padding: 20px 20px 0px 0px;
	text-align: center;
	max-width: 100px;
}
#header .menuICON a { font-size: 20px; }
#header .menuICON span { font-size: 12px; }

#header .menuMAG {
	position: relative;
	float: right;
	margin-top: -40px;
	padding: 10px 25px 0px 0px;
	color: #999999;
}
#header .menuMAG a { opacity: 0.5; color: #FFFFFF; }
#header .menuMAG a:hover { opacity: 0.8; color: #FFFFFF; }

#header #navbox { 
	border-top: 1px solid #999999;
	display: table;
	margin-bottom: 1.0em;
	width: 100%;
	clear: both; 
	padding-bottom: 5000px;
}
#header #topnav {
	float: left;
	width: 50%;
	min-width: 200px;
}
#header #topnav-rightcol {
	display: block;
	float: left;
	width: 20%;
	min-width: 200px;
	color: #fafafa;
}
#header #topnav .menu {
	font-size: 1.2em;
	font-style: italic;
	color: #999999;
	border-bottom: 1px solid #999999;
	margin-left: 45px;
	display: table;
}
#header #topnav .menu ul li hr {
	border-top: 1px solid #333333;
}
#topnav ul {
	list-style: none;
	list-style-type: none;
	margin: 0; padding: 0;
	margin-left: 40px;
	margin-top: 10px;
}
#topnav ul li a {
	display: inline-block;
	font-family: Georgia;
	font-size: 1.2em;
	color: #dddddd;
	padding: 0.4em 0 0.4em 0;
}
#topnav ul li a:hover {
	color: #fafafa;
}

ul#clientlist {
	border-left: 1px solid #999999;
	list-style: none;
	list-style-type: none;
	margin: 0; padding: 0;
	margin-top: 10px;
}
ul#clientlist li {
	margin-left: 20px;
	padding: 5px;
}

#clientlist-submenu {
	float: left;
	text-align: left;
	max-width: 28%;
	margin-left: 10px;
}
#clientlist-submenu h1 {
	font-size: 0.9em;
	text-align: left;
	padding-bottom: 10px;
	border-bottom: 1px solid #cccccc;
	margin-bottom: 10px;	
	color: #666666;
	margin-top: 0;
	padding-top: 0;
}
#clientlist-submenu b {
	color: #333333;
	font-weight: bold;
	text-decoration: none;
	font-size: 1.0em;
}
#clientlist-submenu ul {
	padding-left: 0;
	list-style-type: none;
	margin-top: 40px;
}
#clientlist-submenu ul li {
	padding-top: 6px;
	padding-bottom: 16px;
	color: #333333;
	white-space: nowrap;
}
#clientlist-submenu i {
	color: #999999;
	font-weight: normal;
}
#clientlist-submenu a {
	color: #880000;
	font-weight: lighter;
	text-decoration: none;
	font-size: 1.0em;
	text-align: left;
}
#clientlist-submenu a:hover {
	color: #333333;
	text-decoration: none;
}
#main {
	margin: 0 0 0 0;
	clear: both;
	background-attachment: fixed;
	background-position: top center;
	padding-bottom: 50px;
}
div.content, .content-white, .content-black, .content-grey {
        clear: both;
	margin: 0 auto; 
	align: center;
        padding: 10px;
        max-width: 800px; 
}
div.content p,.content-white p,.content-black p,.content-grey p {
	margin: 0 auto;
	text-align: center;
	width: 80%;
	max-width: 1200px;
	margin: 0 auto;
}
div.content-white { background-color: #ffffff; background: #fafafa; color: #666666; }
div.content-white a { color: #666666; }
div.content-white h2 { color: #666666; }
div.content-white a:hover { color: #6B0F1A; text-decoration: none; }

div.content-black { background-color: #333333; background: #333333; color: #dddddd; }
div.content-black a { color: #EEEEEE; }
div.content-black h2 { color: #DDDDDD; }
div.content-black a:hover { color: #fafafa; text-decoration: none; }

div.content-grey { background-color: #dddddd; background: #dddddd; color: #444444; }
div.content-grey a { color: #555555; }
div.content-grey h1 { color: #333333; }
div.content-grey h2 { color: #333333; }
div.content-grey h3 { color: #333333; }
div.content-grey a:hover { color: #333333; text-decoration: underline; }

.content-white hr,.content-black hr { border: 1px solid #555555; height: 0.01em; }

.center,.more,.order {
	margin: 20px auto;
	margin-bottom: 10px;
	text-align: center;
}
.more a {
	font-size: 1.0em;
	font-weight: normal;
	padding: 5px 20px 5px 20px;
	border-radius: 15px;
}

div.order a {
	font-size: 1.0em;
	font-weight: normal;
	padding: 5px 20px 5px 20px;
	border-radius: 15px;
	border: 1px solid #999;
	background-color: #933;
	color: #eee;
	border: 1px solid #222;
}
div.order a:hover {
	color: #fff;
	text-decoration: none;
}

div.content-white div.more a {
	color: #888;
	border: 1px solid #888;
	background-color: #eee;
}
div.content-white div.more a:hover {
	color: #333;
	border: 1px solid #333;
	font-weight: normal;
	text-decoration: none;
}

div.content-grey div.more a {
	background-color: #fff;
	color: #999;
	border: 1px solid #999;
}
div.content-grey div.more a:hover {
	color: #222;
	border: 1px solid #222;
	font-weight: normal;
	text-decoration: none;
}


div.content-black div.more a {
	color: #999;
	background-color: #333;
	border: 1px solid #999;
}
div.content-black div.more a:hover {
	color: #eee;
	border: 1px solid #eee;
	font-weight: normal;
	text-decoration: none;
}


div.content-slider div.more a {
	position: absolute:
	bottom: -140px;
}
div.content-slider div.more a {
	color: #999;
	background-color: #333;
	border: 1px solid #999;
}
div.content-slider div.more a:hover {
	color: #eee;
	background-color: #333;
	border: 1px solid #eee;
	font-weight: normal;
	text-decoration: none;
}

#book {
	position: fixed;
	bottom: 40px;
	width: 100%;
	text-align: center;
}
#book a {
	margin: 0 auto;
	font-size: 110%;
	padding: 5px 20px 5px 20px;
	border-radius: 15px;
	opacity: 0.5;
	color: #fafafa;
	background-color: #999;
	border: 2px solid #fafafa;
}
#book a:hover {
	opacity: 1.0;
}

#footer { 
	position: fixed;
	color: #999;
	bottom: 0;
	text-align: center;
	width: 100%;
	padding: 10px;
	background-color: #000;
	border-top: 1px solid #999;
}
#footer a { color: #dddddd; }
#footer a:hover { color: #ffffff; }

div.content-slider {
	background-color: #111;
	margin: 0;
	padding: 0;
	position: relative;
}
div.content-slider div.slide {
	width: 100%;
	margin: 0 auto;
	background-color: #111;
	text-align: center;
	display: none;
}
div.slide a.prev,div.slide a.next {
	height:65px;
	width:43px;
	top:50%;
	margin-top:-30px;
	opacity:0.6;
	cursor:pointer;
	color: #fafafa;
	padding-top: 20px;
	font-size: 35px;
	font-weight: bold;
	font-family: georgia;
	text-decoration: none;
	background: #666;
	position: absolute;
}
div.slide a.prev:hover,div.slide a.next:hover {
	opacity:1;
	text-decoration: none;
}
div.slide a.prev { left:0; }
div.slide a.next { right:0; }
div.slide img {
	max-width:100%;
	min-width: 600px;
}
div.slide .more {
	width: 100%;
	margin: 0 auto;
	bottom: 20px;
	left: center;
	text-align: center;
}
div.slide .more a {
	font-weight: normal;
	padding: 5px 20px 5px 20px;
	border-radius: 15px;
	text-decoration: none;
	opacity: 0.8;
	font-size: 150%;
	background-color: #999;
	border: 1px solid #111;
	color: #111;
}
div.slide .more a:hover {
	background-color: #333;
	border: 1px solid #fafafa;
	color: #fafafa;
	opacity: 0.8;
	font-weight: normal;
	text-decoration: none;
}

@media screen and (max-width: 510px) {
	.solopic { width: 100%; height: auto; padding-left: 0; padding-right: 0; align: center; }
	#header #navbox { background-image: none; }
	#topnav ul li a { padding: 0.6em 0 0.6em 0; }
	.nomo { display: none; }
	#header #topnav .menu { display: none; }
	div.content p,.content-white p,.content-black p { 
	        left: 0 !important;
	        width: 100% !important;
		padding-left: 0px; 
		padding-right: 0px; 
    		background-attachment: initial;
	}
	#footer { font-size: 1.2em; } 
}

.threecol {
	width: 90%;
	margin: 0 auto;
	display: table;
}
.threecol header {
	padding: 0 15px;
}
.threecol1 {
	width: 32%;
	float: left;
}
.threecol footer {
	clear: both;
	padding: 0 15px;
}

.twocol {
	max-width: 90%;
	margin: 0 auto;
	display: table;
}
.twocol1, .twocol2 {
	width: 45%;
	float: left;
	margin: 0 2% 0 2%;
}
.twocol1 img, .twocol2 img, .threecol1 img {
	width: 90%;
	margin: 0 auto;
	border: 0;
}
.twocol footer {
	clear: both;
	padding: 0 15px;
}


/************************************************************************************
 LATEST WORK
************************************************************************************/
#latestwork {
        clear: both;
        background-repeat: no-repeat;
        background-attachment: fixed;
        padding: 10px;
}
#latestwork-columns { 
	margin: 0 auto;
	max-width: 1200px;
	background-image: url('/images/latest-cover/bg.png');
	background-size: contain;
	background-repeat: horizontal;
	display: table;
	text-align: center;
	margin-top: 25px;
}
#latestwork-columns .article-left, #latestwork-columns .article-right {
	margin-left: 4%;
	margin-right: 4%; 
	width: 42%;
	float: left;
}
#latestwork-columns .article {
	margin-top: 50px;
	margin-bottom: 50px;
	color: #999999;
}
#latestwork-columns .article h3 { 
	margin: 0; 
	padding: 0; 
	line-height: 1.2em;
	font-size: 1em;
	font-weight: lighter;
	color: #333333;
}
.feedyear {
	text-align: center; 
	padding: 5px 15px 5px 15px; 
	color: #AAAAAA; 
	margin: 0 auto; 
	margin-top: 20px; 
	margin-bottom: 20px; 
	border: 1px solid #CCCCCC;
	font-size: 20px;
	display: table;
}
.feedyear a:hover {
	text-decoration: none;	
}
#latestwork-columns .article p { 
	margin: 0; 
	padding: 0; 
	line-height: 1.2em;
	font-size: 1em;
	font-weight: lighter;
	color: #999999;
}
#latestwork-columns .article img { 
	border: 1px solid #dfdfdf;
	width: 80%;
	height: auto;
}
#latestwork-columns .article-left { text-align: right; }
#latestwork-columns .article-right { text-align: left; }

#latestwork-columns .article-left p { text-align: right; }
#latestwork-columns .article-right p { text-align: left; }

#latestwork-columns .article .date {
	margin-top: 15px;
	margin-bottom: 5px;
	font-size: 0.8em;
}
#latestwork-columns a {
	color: #999999;
	text-decoration: none;
}
#latestwork-columns a:hover {
	color: #333333;
	text-decoration: none;
}

/* for 700px or less */
@media screen and (max-width: 700px) {
	#main { margin: 0 0 0 0; }
	#latestwork-columns .article { margin-bottom: 40px; }
	div.content p,.content-white p,.content-black p { 
	        left: 0 !important;
	        width: 100% !important;
		padding-left: 0px; 
		padding-right: 0px; 
    		background-attachment: initial;
	}
	#latestwork-columns .article { margin-bottom: 40px; }
	#latestwork-columns .article { font-size: 0.8em; }
	#CSS_DISABLED_latestwork-columns .article span { display: block; } 
	#CSS_DISABLED_latestwork-columns .article span.bull { display: none; } 
}

/************************************************************************************
 GALLERY SETS
************************************************************************************/
#gallery-head-black, #gallery-head-white { 
	padding: 5px;
	margin-bottom: 20px;
}
#gallery-head-black h1, #gallery-head-white h1 { 
	font-size: 0.8em;
}
#gallery-head-white {
	background-color: #fafafa; 
	color: #333333; 
}
#gallery-head-white a {
	color: #333333; 
}
#gallery-head-black {
	background-color: #222222; 
	color: #CCCCCC; 
}
#gallery-columns { 
	margin: 0 auto;
	max-width: 1000px;
	text-align: center;
	clear: both;
	display: table;
	margin-top: 20px;
}
#gallery-scroll {
	float: left;
	width: 65%;
	max-width: 500px;
	margin-bottom: 100px;
}
#gallery-scroll img, #gallery-scroll video {
	width: 100%;
	padding: 0; margin: 0;
}
#gallery-scroll .caption {
	text-align: left;
	background-color: #eeeeee;
	color: #666666;
	border-left: 1px solid #CCCCCC;
	border-right: 1px solid #CCCCCC;
	padding: 10px;
	margin: 0;
	margin-top: -4px;
}

#gallery-scroll .likeshare {
	padding: 0;
	background-color: #ffffff; 
	border: 1px solid #DDDDDD; 
	padding-top: 4px;
	height: 30px; 
	text-align: right; 
	overflow: hidden;
	margin-bottom: 25px; 
	margin-top: -4px;
}

img.social_icon { height: 80px; width: auto; }

#gallery-scroll h2 {
	color: #999999;
}
#gallery-submenu {
	float: left;
	text-align: left;
	max-width: 28%;
	margin-left: 30px;
}
#gallery-submenu h1 {
	font-size: 0.9em;
	text-align: left;
	padding-bottom: 2px;
	border-bottom: 1px solid #cccccc;
	color: #666666;
	margin-top: 0;
	padding-top: 0;
}
#gallery-submenu ul {
	padding-left: 0;
	list-style-type: none;
	margin-top: 40px;
}
#gallery-submenu ul li {
	padding-top: 6px;
	padding-bottom: 6px;
	color: #666666;
}

#gallery-submenu ul li.subhead {
	border-bottom: 1px solid #cccccc;
	margin-bottom: 8px;
}
#gallery-submenu a {
	color: #666666;
	font-weight: lighter;
	text-decoration: none;
	font-size: 1.0em;
	text-align: left;
}
#gallery-submenu a:hover {
	color: #333333;
	text-decoration: none;
}
#gallery-submenu ul.fineartinfo li {
	color: #999999;
}
#gallery-submenu ul.fineartinfo li b {
	color: #333333;
	font-weight: normal;
}

/* for 700px or less */
@media screen and (max-width: 700px) {
	#main { margin: 0 0 0 0; }
	#gallery-scroll {
		clear: both;
		width: 100%;
		margin: 0;
	}
	#gallery-scroll img {
		width: 90%;
	}	
	#gallery-submenu {
		float: left;
		width: 90%;
		font-size: 1.2em;
		margin-left: 5%;
		position: relative;
		margin-bottom: 80px;
		max-width: 90%;
	}
	div.content p,.content-white p,.content-black p { 
	        left: 0 !important;
	        width: 100% !important;
		padding-left: 0px; 
		padding-right: 0px; 
    		background-attachment: initial;
	}
}


/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* for 1060px or less */
@media screen and (max-width: 780px) {
	#main { margin: 0 0 0 0; }
	.threecol {
		width: 94%;
	}
	.threecol header {
		height: 200px;
		padding: 0 15px;
	}
	.threecol1 {
		width: 41%;
		padding: 1% 4%;
	}
	.threecol2 {
		width: 41%;
		padding: 1% 4%;
		margin: 0px 0px 5px 5px;
		float: right;
	}
	.threecol3 {
		clear: both;
		padding: 1% 4%;
		width: auto;
		float: none;
	}
	.threecol header, .threecol footer {
		padding: 1% 4%;
	}
	div.content p,.content-white p,.content-black p { 
	        left: 0 !important;
	        width: 100% !important;
		padding-left: 0px; 
		padding-right: 0px; 
    		background-attachment: initial;
		-webkit-background-size: 2000px 1400px;
		-webkit-appearance: display;
		-moz-appearance: display;
	}
}

/* for 780px or less */
@media screen and (max-width: 780px) {
	#header { position: static; }
	#footer { display: none; position: static; }

	.threecol1 {
		width: auto;
		float: none;
	}
	.threecol2 {
		width: auto;
		float: none;
		margin-left: 0px;
	}
	.threecol3 {
		width: auto;
		float: none;
	}
	.threecol footer {
		clear: both;
		padding: 0 15px;
	}
	.twocol1 {
		width: auto;
		float: none;
		padding: 5px 15px;
	}
	.twocol2 {
		width: 100%; /* Account for margins + border values */
		float: none;
		padding: 5px 15px;
		margin: 0px 5px 5px 5px;
	}
}


/* for 480px or less */
@media screen and (max-width: 480px) {
	#main { margin: 0 0 0 0; }
	#gallery-columns { margin: 0 0 0 0; }
	#gallery-head-black, #gallery-head-white { height: 0; display: none; }
	#gallery-scroll img { width: 100%; max-width: 100%; margin: 0; padding: 0; }

	#latestwork { margin: 0 0 0 0; padding: 0 0 0 0; }
	#latestwork-column { margin: 0 0 0 0; padding: 0 0 0 0; }

	#header { position: static; }
	#footer { display: none; position: static; }
	.no-mobile { display: none; }

	.threecol header {
		height: auto;
	}
	.threecol h1 {
		font-size: 2em;
	}
	.threecol3 {
		display: none;
	}
	#header .logo {
		max-width: 240px;
	}
}




.threecol header, .threecol .threecol1, .threecol .threecol2, .threecol .threecol3 {
	margin-bottom: 5px;
}

input, select, textarea {
		font-family: "Lato", Arial, Helvetica, sans-serif;
		font-weight: 200;
		font-size: 1rem;
		line-height: 1.65;
	}

/* Form */
form {
	margin: 0 auto;
	text-align: center;
	width: 80%;
}
input[type="text"], input[type="email"], select, textarea {
	margin: 0 auto;
	margin-bottom: 0.7em;
	border: 1px solid #dddddd;
	color: #666666;
	line-height: 1.1em;
	padding: 0.3em;
       	text-decoration: none;
	font-weight: 400;
	display: block;
	width: 100%;
}
input[type="text"]:focus, input[type="email"]:focus, select:focus, textarea:focus {
	border-color: #960730;
}
input[type="submit"].special {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding: 0.2em 2em;
	border-radius: 1rem;
	background-color: #666666;
	color: #fafafa !important;
	font-weight: 400;
}
input[type="submit"].special:hover {
	background-color: #000000;
}

div.transbg {
  	background-position: 50% 20%;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	background-color: none; 
	background: none; 
}

/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip span.tooltiptext {
  visibility: hidden;
  width: 300px;
  background-color: #555555;
  color: #fafafa;
  font-size: 1em;
  text-align: center;
  padding: 5px;
  border-radius: 6px;

  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -160px;

  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip span.tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555555 transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover span.tooltiptext {
  visibility: visible;
  opacity: 1;
}

#linktree {
        align: center;
        text-align: center;
        margin: 0 auto;
        display: table;
        width: 95%;
}
#linktree a {
        clear: both;
        text-decoration: none;
        display: block;
        color: #333333;
        padding: 15px;
        border: 2px solid #FAFAFA;
        margin: 10px;
        font-size: 1.2em;
        background-color: #dddddd;
}
#linktree a:hover {
        text-decoration: none;
        color: #222222;
        background-color: #ffffff;
}
#linktree a.headshots { background-color: #fafafa; }
#linktree a.headshots:hover { background-color: #DDDDDD; border-color: #ffffff; color: #111111; }

.user-profile__social__links {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items:center
}

.user-profile__social__links {
    margin: 50px auto 70px;
    position: relative;
    left: 0;
    width: 100%;
    bottom:15px
}

.user-profile__social__links__item {
    cursor: pointer;
    width: 60px;
    max-width: 50px;
    -webkit-transition: -webkit-transform cubic-bezier(.23, 1, .32, 1);
    transition: -webkit-transform cubic-bezier(.23, 1, .32, 1);
    transition: transform cubic-bezier(.23, 1, .32, 1);
    transition:transform cubic-bezier(.23, 1, .32, 1), -webkit-transform cubic-bezier(.23, 1, .32, 1)
}

.user-profile__social__links__item:hover {
    -webkit-transform: scale(1.075);
    transform:scale(1.075)
}

.user-profile__social__links__item svg {
        fill: #ffffff;
    pointer-events: none
}

#badges { text-align: center; }
#badges img { width: 400px; max-width: 80%; align: center; padding: 10px; }
#badges div { padding: 10px; max-width: 800px; margin: 0 auto; align: center; }

/* ============================================================
   Reader redesign, phase 1 (Photography Magazines §8, 2026-08-02)
   Scoped to the cgi-bin/mag.co2 reader page only. Class names are new
   and additive -- nothing above this block is touched or renamed.
   ============================================================ */

/* 2026-08-02 (design review, Leo): unified near-black field, body through
   header through footer -- the chrome disappears and the page floats,
   the gallery convention. #111 not #000 -- pure black lets this title's
   own dark forest frames dissolve into the background. */
html, body { height: 100%; margin: 0; }
body {
	background-color: #0d140e;
	height: 100dvh; /* NOT min-height -- min-height is a floor, not a
	                   ceiling, and let the document grow taller than the
	                   viewport instead of forcing .reader-stage to shrink.
	                   That was the actual overflow bug, not the missing
	                   min-height:0 on the flex children below (needed too,
	                   but insufficient on its own). */
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* !important still needed here (unlike body, above) -- cgi-bin/mag.co2 still
   prints a per-magazine inline style="background-color: #$MAG_CONF{COLOR}"
   directly on this div, so the reader-wide near-black header would
   otherwise lose to whatever color that site's config carries. */
/* Don, 2026-08-16: "I think it's deceptive" -- the old hidden <h1> held
   the full page title, invisible, purely for SEO/screen readers, while
   the visible brand link had its own separate text. Replaced with a
   real, visible <h1> wrapping the brand link instead -- one true
   heading, no hidden duplicate. display:contents drops the <h1> out of
   the box model entirely so .reader-brand (its only child) is still the
   actual flex item .reader-header centers, same as before this wrapper
   existed -- no visual change, just no longer hidden markup. */
.reader-brand-h1 { display: contents; }
.reader-header {
	background-color: #0d140e !important;
	height: 20px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px 0 0;
}
.reader-header .reader-brand {
	line-height: 1;
	white-space: nowrap;
	color: #cfcfcf;
	/* Don, 2026-08-16, after tonight's full logo replacement: most titles'
	   new logos read serif, 256photo is the one exception (its own conf
	   sets HEADER_FONT to a sans stack). Default here is the serif
	   fallback for the three that don't set their own. */
	font-family: var(--header-font, Georgia, "Times New Roman", serif);
	font-size: .82rem;
	font-weight: 400;
	letter-spacing: .01em;
	text-decoration: none;
}
.reader-header .reader-brand:hover { color: #ffffff; text-decoration: none; }

/* .reader-body wraps .reader-stage + .reader-footer (Syntax, 2026-08-02)
   so the two travel and centre together in the leftover space below the
   header, instead of the page centring alone with the footer stuck to
   the viewport edge -- Don's own diagnosis: the footer attaches to the
   magazine, not to the screen. */
.reader-body {
	flex: 1;
	min-height: 0; /* same load-bearing reason as .reader-stage below used
	                  to carry -- flex children default to min-height:auto
	                  and refuse to shrink, pushing content off-screen. */
	display: flex;
	flex-direction: column;
	justify-content: center; /* centres the {stage, footer} group as one
		unit in the leftover space. On desktop there is no leftover space
		(the image already fills it via .reader-stage's max-height below),
		so this is a no-op there -- verify 6px/6px still holds. */
}

.reader-stage {
	flex: 0 1 auto; /* was flex:1 -- that force-grew this to fill 100% of
	                   available height regardless of image size, which is
	                   exactly what stranded the footer at the viewport
	                   bottom. Now sized to its own content (the image),
	                   capped by max-height so it still fills the space on
	                   desktop where the image genuinely needs it. */
	max-height: 100%;
	min-height: 0;
	display: flex;
	align-items: stretch;
	max-width: 1400px;
	width: 100%;
	margin: 0 auto;
}
.reader-turn {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
	transition: background-color .15s;
}
.reader-turn:hover { background-color: rgba(255,255,255,.03); }
.reader-turn .reader-arrow {
	width: 48px;
	height: 48px;
	opacity: .3;
	transition: opacity .15s;
	user-select: none;
}
.reader-turn:hover .reader-arrow { opacity: .85; }

.reader-page-wrap {
	flex: 0 1 auto;
	min-height: 0;
	display: flex;
	align-items: stretch; /* was center -- center starves .reader-page of a
	                         definite height, so the img's max-height:100%
	                         below has nothing real to resolve against */
	justify-content: center;
	padding: 6px 0;
}
.reader-page {
	/* Don's call, 2026-08-11: rather than sizing the flat JPEG and the new
	   HTML format independently and tuning one to match the other's measured
	   pixels (fragile -- a magic number that goes stale the moment the real
	   layout changes), .reader-page itself is now the one definitely-sized
	   container -- aspect-ratio pinned, width the only free dimension. Both
	   content types (the <img> below, and .fb-page for the new format) just
	   fill it at 100%/100%. Neither has to know or match the other's size;
	   there is only one sizing authority. Numbers are measured from the
	   trim (792x1032) and real viewport share (96vw mobile, see the mobile
	   override below) -- same measurements as before, just applied once
	   instead of duplicated on .fb-page. */
	position: relative;
	background-color: #fff;
	aspect-ratio: 1024 / 1325 !important;
	/* One formula for every situation instead of a desktop version and a
	   separate mobile-media-query override: whichever of the three
	   constraints is tightest wins, in any combination of physical window
	   size and zoom level. A flat width with no height term (the old mobile
	   override) is what let a zoomed-but-still-short desktop window size
	   purely by width and overflow vertically, which is what was reading as
	   "goes square"/distorted -- the container itself was never actually a
	   different shape, it just wasn't capped by the height it had left.

	   2026-08-11, fixed for real (was parked for Codex, not for Webster --
	   Don's words): the old third term, `89.9vh`, was a FLAT PERCENTAGE of
	   viewport height standing in for "whatever's left after the header and
	   footer." Wrong shape of formula -- .reader-header and .reader-footer
	   (measured 66px) are fixed-pixel elements that don't shrink as browser
	   zoom increases, while the viewport's CSS-pixel height DOES shrink on
	   zoom-in. So the header+footer's fixed footprint ate a growing share
	   of an ever-smaller viewport the more you zoomed in -- no flat
	   vh-percentage can ever account for that, the relationship is
	   subtractive (100dvh - fixed px), not proportional (X% of vh).
	   Replaced with a real calc() subtracting the actual fixed chrome.
	   Uses 100dvh to match `body`'s own unit above, for the same
	   mobile-toolbar reason body uses it instead of 100vh.

	   2026-08-15: .reader-header grew 30px -> 44px (top padding added,
	   Don: "the top link... looks terrible... needs top padding"). The
	   fixed-chrome constant below MUST stay in sync with .reader-header's
	   actual height + .reader-page-wrap's 12px padding + .reader-footer's
	   66px, or this photo-sizing calc silently goes stale again exactly
	   like the 89.9vh bug this whole comment describes -- update this
	   number in the same commit as any future .reader-header height
	   chrome: header 20px + .reader-page-wrap's own 6px-top/6px-bottom
	   padding (12px) + footer 66px = 98px. Uses 100dvh to match `body`'s
	   own unit above, for the same mobile-toolbar reason body uses it
	   instead of 100vh. */
	width: min(1000px, 96vw, calc((100dvh - 98px) * 1024 / 1325));
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}
.reader-page img.reader-page-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	/* outline, NOT border -- a border adds to the layout box and can
	   reintroduce the overflow bug just fixed, since this image is sized
	   by max-height:100% against a flex-constrained parent. outline draws
	   outside the box with zero layout effect. #666 reads as a light line
	   against the #111 field and a dark line against a white page margin --
	   needed for dark covers/back-covers (measured near-black edges on
	   256photo/256017's back cover) without greying out interior pages,
	   which are already pure white margin and don't need it. */
	outline: 1px solid #666666;
	outline-offset: 0;
}

/* Vote star -- overlays the page image, top right. No box/pill behind it;
   the dual-stroke PNG itself (co2likes-like.png / co2likes-liked.png) is
   what survives a blown-white or crushed-black corner. co2likes' own
   click/state logic is untouched -- this only repositions its iframe.
   co2likes' own <img> is 40x40 (fixed 2026-08-02, was a 75x27 pill-button
   leftover that squashed the star -- see Audit/_audit_backup_2026-08-01/).
   ⚠️ line 18 of THIS file has a legacy `iframe { min-height: 500px }` rule
   (unrelated widget embed elsewhere on the site). min-height always wins
   over a smaller height declaration, so without the override below this
   iframe was rendering 40 wide x 500 TALL -- invisible (transparent) but
   still catching clicks over 63% of the page image. Design (Leo) caught
   this via elementFromPoint() stress-testing at short viewports; it would
   have silently killed phase-2 ad hotspots under the right-hand column
   with zero visual symptom. min-height MUST stay pinned here. */
.reader-vote {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 46px;
	height: 46px;
	min-height: 46px; /* both min AND max still required -- see the note
	                     above the legacy `iframe { min-height: 500px }`
	                     rule further up this file. Dropping either one
	                     reopens the 40x500 (now 46x500) click-swallowing
	                     bug Design caught via elementFromPoint(). */
	max-height: 46px;
	border: 0;
	background: transparent;
	filter: drop-shadow(0 1px 3px rgba(0,0,0,.55));
}

.reader-footer {
	background-color: #0d140e !important;
	text-align: center;
	padding: 4px 16px; /* was 14/18 -- Don wants this bar quiet, not a
	                     band. Header grew to 44px 2026-08-15; this footer
	                     wasn't part of that ask, left as-is. */
	font-size: .8rem;
}
/* Button treatment -- copy is Cliff's, this is a placeholder per Leo.
   The one warm element on an otherwise near-black page. Sized down
   2026-08-02, Don: "too in your face" -- yellow stays, everything else
   shrinks so it reads as an invitation, not a demand. No fixed/min-width
   on purpose -- Don is deliberately undecided on whether the button
   should jump size between CTA variants; do not add one without asking
   Leo first, and note the rotation itself may move to one-per-session,
   which would make this moot. */
.reader-footer a {
	display: inline-block;
	color: #111111 !important;
	background-color: #f0c419;
	font-weight: 500;
	font-size: .68rem;
	letter-spacing: .01em;
	text-decoration: none !important;
	padding: 5px 14px;
	border-radius: 999px;
	transition: background-color .15s, transform .15s;
}
.reader-footer a:hover {
	background-color: #ffd23f;
	transform: translateY(-1px);
}

@media (max-width: 760px) {
	.reader-turn { display: none; }
	/* .reader-stage never sets justify-content -- on desktop the two
	   flex:1 arrows either side of .reader-page-wrap push it to visual
	   center regardless. Hiding both arrows here removes that trick, and
	   .reader-stage's default (flex-start) left-justifies .reader-page-wrap
	   instead. Invisible for the old <img>, which fills 100% width and
	   leaves no gap to reveal it; .fb-page's 96vw does leave a gap, which is
	   what actually exposed this. */
	.reader-stage { justify-content: center; }
	.reader-page-wrap { padding: 4px 0; }
	/* No .reader-page width override here anymore -- see the base rule
	   above, which now includes a 96vw term in its own min(). Don caught
	   the real bug with a plain width:96vw here: it has no height cap, which
	   is harmless on a real phone (narrow width always implies a tall
	   screen with room to spare) but breaks the moment "narrow" happens for
	   a different reason -- Brave's zoom shrinks the CSS-pixel viewport
	   until it crosses this same 760px breakpoint on an actual desktop
	   window, where the physical window is NOT any shorter. Result: a card
	   sized purely by width, tall enough to push its own footer below the
	   fold. One min() with all three constraints in the base rule picks
	   whichever is tightest in any situation instead of two formulas that
	   each assume their own trigger means something it doesn't always mean. */
}

/* ---- New-format interior page (dev, 2026-08-11): full-bleed photo, credit
   badge on the image instead of a caption row underneath. Trim is fixed at
   792x1032 (Trail's own, mags/page-generation-plan.md notes 256photo's trim
   differs -- 1024x1325 -- and a shared number is still Don's call to make
   before this goes beyond Trail Photographers). container-type lets the
   credit text scale with the rendered page size instead of the viewport,
   same technique the prototype used. */
.fb-page {
	/* .reader-page is now the one sized container (see above) -- this just
	   fills it. No independent sizing, nothing to keep in sync with the old
	   format by hand. */
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: #fff;
	container-type: inline-size;
}
/* Photo sits inset from the page, not edge to edge -- a thin white sliver at
   top and a white footer bar at bottom for the page number, matching the
   approved TPM003/proto.html design (top:2.2%, bottom:5.5% reserved). */
.fb-photo {
	position: absolute;
	left: 0; right: 0; top: 2.2%; bottom: 5.5%;
	width: 100%;
	height: 92.3%;
	/* Was `cover`, which crops anything that isn't the page's own aspect
	   ratio. contain never crops; it letterboxes against .fb-page's
	   existing white background instead. Ported from 256photo (ed49707,
	   2026-08-12) once Don asked for it on all four titles -- see that
	   commit for the original page23/256001 finding. */
	object-fit: contain;
	display: block;
}
.fb-credit {
	position: absolute;
	left: 4%;
	bottom: 9%;
	max-width: 70%;
	min-width: 28cqw;
	background: rgba(0,0,0,.55);
	color: #fff;
	padding: 1.6cqw 2.2cqw;
	border-radius: 4px;
}
.fb-page-even .fb-credit { left: auto; right: 4%; }
/* No folio on the back cover at all (Don, 2026-08-11, after seeing it live:
   "the back cover does not require the footer no matter what the case
   is") -- the photo takes the space that would've been the white footer
   band instead of leaving it blank. */
/* Full bleed, no top sliver either (Don, 2026-08-11: "back cover can be full
   bleed all the way around... same as the front cover"). Only the back
   cover -- interior pages keep their thin top sliver + footer band. */
/* cover, not contain (Don, 2026-08-16): interior photo pages stay contain
   on purpose (never crop a submission), but the back cover is one fixed
   slot he'll swap the photo out of if a crop looks bad -- "I don't wanna
   constantly have to fix the back cover to fill the page... if it's a
   little bit off, I don't care." Fills the full-bleed box completely,
   crops whatever doesn't match the trim ratio. */
.fb-page-back .fb-photo { top: 0; bottom: 0; height: 100%; object-fit: cover; }
/* Back cover: one physical page, no odd/even, no outer edge -- credit and
   folio both center instead of hugging a side (Don, 2026-08-11). */
.fb-page-back .fb-credit { left: 50%; right: auto; transform: translateX(-50%); text-align: center; }
/* The global p { text-align: left } (line 13) sets text-align directly on
   every <p> -- a direct rule always beats an ancestor's inherited value no
   matter that ancestor's specificity, same shape of bug as the padding/
   line-height one above. .fb-page-back .fb-credit's text-align: center
   above never reached .fb-title/.fb-loc/.fb-name for exactly that reason;
   has to target the <p> tags themselves. */
.fb-page-back .fb-credit p { text-align: center; }
.fb-page-back .fb-credit .fb-links { text-align: center; }
/* Landscape photos (Don, 2026-08-15): object-fit:contain leaves real white
   space above and below the image inside .fb-page's portrait-shaped
   container -- the normal dark corner-anchored credit box floats on that
   white space instead of the photo and looks wrong. Centered under the
   photo instead of hugging a side, light background instead of dark. */
/* Landscape photos, same $IS_LANDSCAPE flag as the credit-box treatment
   above (set by cgi-bin/mag.co2) -- the magazine logo in the white space
   above the photo, centered. Don, 2026-08-15: "a test maybe only". The
   fixed 2.2% top sliver (.fb-photo's own inset) is nowhere near tall
   enough to hold a real logo -- the actual empty band above a contained
   wide photo grows with how wide it is, same problem the credit box's
   position already solves via --photo-ratio. Reusing that: a
   placeholder linear scale off the same variable, band height from ~8%
   at the 1.15 cutoff up to 30% for an extreme panorama, centered top:0
   flex band so the logo's own height doesn't need to be known ahead of
   time. First-pass numbers, meant to be eyeballed and retuned.
   Don, 2026-08-16: threshold moved 1.3 -> 1.15 (unified with
   $IS_LANDSCAPE), clamp's own baseline follows. */
.fb-page-logo-band {
	position: absolute;
	top: 0; left: 0; right: 0;
	height: clamp(8%, calc(8% + (var(--photo-ratio, 1.15) - 1.15) * 12%), 30%);
	display: flex;
	/* Don, 2026-08-16: "should be attached to the top of the page" -- was
	   align-items:center, which centers the logo within this band's full
	   height (8-30% of the page), well past the photo's actual top edge
	   (.fb-photo's own 2.2% inset) on most ratios -- pulled the logo down
	   onto the photo instead of keeping it pinned to the white space at
	   the page's top. flex-start anchors it to top:0 instead. */
	align-items: flex-start;
	justify-content: center;
	/* Don, 2026-08-16: "needs to have a little bit more top padding." */
	padding-top: 2cqw;
}
.fb-page-logo {
	/* Don, 2026-08-16: "needs to not change size" -- max-height:80% was
	   relative to the band above, whose own height scales with
	   --photo-ratio, so the logo's rendered size grew/shrank with the
	   photo's aspect ratio instead of staying constant. Dropped the
	   max-height cap entirely; width alone (in page-relative cqw units,
	   not the variable band) now fully determines size. */
	width: 50cqw;
	height: auto;
	object-fit: contain;
}
.fb-page-landscape .fb-credit {
	left: 50%; right: auto;
	bottom: clamp(5%, calc(5% + (var(--photo-ratio, 1) - 1) * 15%), 20%);
	transform: translateX(-50%);
	text-align: center;
	background: rgba(255,255,255,.92);
	color: #222;
}
.fb-page-landscape .fb-credit p { text-align: center; }
.fb-page-landscape .fb-credit .fb-links { text-align: center; }
.fb-page-landscape .fb-credit .fb-links a { color: #222; }
/* The site's global p { padding-bottom: 15px; line-height: 1.5em; } (line 13)
   was never reset here -- .reader-page's line-height:0 only beat the 1.5em
   half of it (class beats element selector), the 15px padding-bottom had
   nothing overriding it at all. Every text line in the badge was carrying an
   extra 15px underneath it, real px not cqw, which is what actually read as
   "too much line height" -- reset both explicitly instead of relying on
   nothing contesting the global rule. */
.fb-credit p { padding: 0; line-height: 1.25; }
.fb-credit .fb-title { margin: 0; font-size: 2cqw; font-style: italic; }
.fb-credit .fb-loc { margin: .2cqw 0 0; font-size: 1.6cqw; font-style: italic; opacity: .85; }
.fb-credit .fb-name { margin: 1cqw 0 0; font-size: 2.3cqw; font-weight: 600; letter-spacing: .02em; }
.fb-credit .fb-links { margin: .4cqw 0 0; font-size: 1.6cqw; }
.fb-credit .fb-links a { color: #fff; text-decoration: none; }
.fb-folio {
	/* Was sitting almost flush against the very bottom edge (bottom:1.3% in
	   a 5.5%-tall footer band) -- bumped up and given real letter-spacing so
	   it reads as a proper credit line instead of cramped small print. */
	position: absolute;
	left: 4%;
	right: 4%;
	bottom: 2.1%;
	font-size: 1.8cqw;
	letter-spacing: .02em;
	color: #5b5b5b;
	text-align: right;
	white-space: nowrap;
}
.fb-page-even .fb-folio { text-align: left; }
.fb-page-back .fb-folio { text-align: center; }
.fb-folio span { opacity: .5; margin: 0 .6em; }

/* Photographer index page, dev only (2026-08-11) -- generated from
   the issue's own .db instead of a hand-built flat JPEG, same reasoning as the
   interior photo pages: it can't go out of sync with data that doesn't
   exist in the file at all. Don, after the first pass had thumbnails and
   titles and scrolled: "way more complicated than it should be... has to
   all fit on the page, just like it already existed" -- matches the flat
   JPEG it replaces instead: page label, a dotted leader, the name, nothing
   else, two CSS columns instead of scrolling so it always fits regardless
   of row count. */
.idx-page {
	position: relative;
	width: 100%;
	height: 100%;
	background: #eeeeee;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	container-type: inline-size;
}
/* Don, 2026-08-13: was width:100% with no height cap -- this title's logo is
   tall enough at full width that it was pushing the photographer grid below
   past the bottom of the page, which .idx-list's own design comment says
   should never happen regardless of row count. Capped height, width/height
   auto so it shrinks to fit both without distorting, centered if that leaves
   it narrower than the page. */
.idx-banner { max-width: 100%; max-height: 10.8cqw; width: auto; height: auto; display: block; margin: 0 auto; flex: 0 0 auto; padding: 1cqw 0; }
.idx-title-bar {
	/* Don, 2026-08-11: text was too big, bar needed more room -- smaller
	   font, more padding on all sides instead of just top/bottom. */
	/* Brand bar colour. Trail samples a dark forest green from its own
	   logo (#1e3a28); NC Edge uses the deep coastal blue #264561 the mag
	   script already carries for this title (MAGID_THEME). */
	flex: 0 0 auto;
	background: #264561;
	color: #fff;
	text-align: center;
	font-size: 2.2cqw;
	padding: 3.2cqw 2cqw;
}
.idx-list {
	/* Don, 2026-08-11: "it should just have the two columns centered in the
	   page to begin with, and then the gutter be the thing that we're
	   adjusting" -- column-count stretched both columns to fill the full
	   container width, which is what needed padding tricks to look right.
	   Grid instead: grid-auto-flow:column fills the first column top to
	   bottom for exactly $half rows (set inline per-page, above, since the
	   row count varies by issue) before starting the second; each column
	   sizes to its own content (max-content) instead of stretching, and
	   justify-content:center centers the pair as one unit. column-gap is
	   now the single knob for spacing between them, nothing else to tune. */
	flex: 1 1 auto;
	min-height: 0;
	/* Don, 2026-08-16: top padding cut 5cqw->3.2cqw earlier tonight, then
	   raised to 4cqw ("put some more top padding by default") once the
	   line-height reduction below freed up room. Bottom stays 5cqw
	   (still scaled by --idx-scale for an oversized issue); horizontal
	   6cqw doesn't affect bottom overflow so it stays fixed.
	   --idx-top-scale (set inline per-page, from row count) then scales
	   this 4cqw baseline continuously -- more for a light issue, less
	   for a heavy one, "if there's only forty things, more padding at
	   the top... if it's over fifty, needs to get smaller." */
	padding-top: calc(4cqw * var(--idx-top-scale, 1));
	padding-bottom: calc(5cqw * var(--idx-scale, 1));
	padding-left: 6cqw;
	padding-right: 6cqw;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: max-content;
	justify-content: center;
	/* Don, 2026-08-11: "I would put the thing align top, not centered
	   vertically" -- align-content:center floated the block in the middle
	   with big empty gaps when an issue has fewer rows, and filled the
	   space when it has more, so two issues looked inconsistent with each
	   other. Top-aligned is consistent regardless of row count. */
	align-content: start;
	/* Don, 2026-08-11: wider gutter, tighter line height -- was getting
	   close to the bottom of the page. */
	column-gap: 11cqw;
	row-gap: calc(.2cqw * var(--idx-scale, 1));
	/* .reader-page sets line-height: 0 globally for the photo pages'
	   sizing trick -- collapses every text span in here to zero height
	   the same way it did to .fb-credit's <p> tags earlier tonight.
	   Don, 2026-08-16: pulled back down from last night's 1.28 -- "I
	   increased the line height last night... just a little bit
	   smaller" -- rows were reading spread out. */
	line-height: 1.2;
}
.idx-row {
	display: flex;
	align-items: baseline;
	gap: .5cqw;
	padding: calc(.3cqw * var(--idx-scale, 1)) 0;
}
.idx-num { flex: 0 0 auto; min-width: 4.5cqw; text-align: right; color: #555; font-size: calc(2cqw * var(--idx-scale, 1)); }
.idx-name {
	/* Plain and clean, no underline anywhere, ever (Don, 2026-08-11) -- the
	   site global a:hover { text-decoration: underline } would otherwise
	   still kick in since this is a real <a>, so it's reset explicitly. */
	flex: 1 1 auto;
	font-size: calc(2.2cqw * var(--idx-scale, 1));
	overflow: hidden;
	white-space: nowrap;
	color: #333;
	text-decoration: none;
}
/* Don, 2026-08-11: "I just wanted the photographer's name to get darker
   when you roll over it, I didn't want everything to get darker" -- the
   permanent color/weight change above was wrong; only :hover darkens. */
.idx-name:hover { text-decoration: none; color: #000; }
.idx-folio {
	/* Same folio convention as .fb-folio on the interior pages -- page
	   number outermost, issue/mag name innermost, alignment flips by
	   odd/even (set inline per-page, since it's just one row here, not
	   worth a class per parity like .fb-page-even). */
	/* Don, 2026-08-11: "bottom padding underneath the footer text" -- was
	   even top/bottom, more room below now. */
	flex: 0 0 auto;
	padding: 1.5cqw 4% 3cqw;
	font-size: 1.8cqw;
	letter-spacing: .02em;
	color: #5b5b5b;
	white-space: nowrap;
}
.idx-folio span { opacity: .5; margin: 0 .6em; }

/* Inside front cover, dev only (2026-08-11) -- format owned entirely by
   this file + cgi-bin/mag.co2, boilerplate content comes from
   data/ssi/*.html (Don's own build-pipeline sense of "SSI", not an
   Apache include -- see cgi-bin/mag.co2's ReadSSI). Theme color is --ic-theme,
   set inline per-magazine (see cgi-bin/mag.co2's %MAGID_THEME).

   Two columns, not four corners (Don, 2026-08-11, after the first pass:
   "it's three perfectly cornered pages, and it doesn't look very
   interesting... the right hand side would not be directly lined up with
   the left hand side... closer to the source page"). Each column is a
   flex stack of two boxes sized to their OWN content (not a rigid grid
   half each) -- that's what makes the two columns' internal dividers land
   at different heights instead of lining up, matching the source page,
   and it's also what fixes a real overflow bug the 2x2 grid had: the
   About box's content (with an "Associate Curator" line some issues carry
   and others don't) was taller than a forced 50% cell and getting clipped
   by overflow:hidden. Sized-to-content means whichever box needs more
   room just takes it. */
.ic-page {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	background: #fff;
	overflow: hidden;
	border-left: 10px solid var(--ic-theme, #444);
	container-type: inline-size;
}
.ic-col { flex: 1 1 50%; display: flex; flex-direction: column; min-width: 0; }
/* Don, 2026-08-11: "the left hand column needs to have a gutter line...
   a left border, one pixel gray" -- divides the two columns down the
   middle of the page. */
.ic-col + .ic-col { border-left: 1px solid #ccc; }
/* .reader-page sets line-height: 0 globally for the photo pages' sizing
   trick -- same cascade that hit .fb-credit and the index page earlier
   tonight, collapsing every heading here to zero height too. */
/* Don, 2026-08-11: "that font is ugly, and the line spacing is weird. The
   paragraphs have too much padding, and the sentences don't have enough
   padding" -- Georgia instead of the site's default Arial (already used
   elsewhere on the site, e.g. #topnav), less space between paragraphs,
   more room between wrapped lines within one. */
/* Don, 2026-08-11: "maybe the font just needs to be a little bit larger
   and less spaced out" then "I do think it needs to be sans serif, the
   fonts are just too small to be serif fonts" -- Georgia read fine as a
   headline face but too fussy at body-copy size this small; same system
   sans stack as the TPM003 proto.html prototype. Tightened further to
   make room for the larger size. */
.ic-box { flex: 0 0 auto; padding: .7cqw 2.4cqw; line-height: 1.3; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }
.ic-box h3 {
	text-align: center;
	font-size: 2.05cqw;
	letter-spacing: .03em;
	text-transform: uppercase;
	line-height: 1.2;
	margin: 0 0 .6cqw;
}
/* Don, 2026-08-11: "the bigger issue is the gap between the paragraphs...
   meaning the gaps between the paragraphs in the right hand column are
   too much... the fonts were maybe just one point larger." Lines
   (line-height) were fine as-is, left untouched. */
/* Don, 2026-08-11: "the spacing below the paragraphs everywhere needs to
   be less." */
/* The site global p { padding-bottom: 15px; } (line 13) was never reset
   here -- every margin-bottom edit tonight was invisible next to a flat,
   untouched 15px padding-bottom doing the actual visible spacing. Same
   bug shape as .fb-credit and the index page earlier tonight. */
.ic-box p { font-size: 1.8cqw; line-height: 1.3; margin: 0; padding: 0 0 2cqw; text-align: center; }
.ic-box p:last-child { margin-bottom: 0; }

/* Don, 2026-08-11: "spacing above the cover needs considerable more
   space" -- extra room off the very top of the page, beyond the shared
   .ic-box padding. */
.ic-cover { text-align: center; border-bottom: 1px solid #eee; padding-top: 3.5cqw; }
.ic-cover-img { width: 55%; box-shadow: 0 4px 14px rgba(0,0,0,.25); margin: .5cqw 0 1.2cqw; }
.ic-cover-credit { font-size: 1.6cqw; line-height: 1.42; color: #333; }

.ic-banner { width: 90%; display: block; margin: 0 auto; padding: 1cqw 0; }
/* Don, 2026-08-11: "the spacing above the paragraph in the top right
   corner needs to be more" -- more room between the CTA box's heading and
   its first paragraph specifically. */
.ic-cta-box h3 { color: var(--ic-theme, #444); margin-bottom: 1.4cqw; }
.ic-cta-box .ic-cta { font-weight: 600; color: var(--ic-theme, #444); }
.ic-cta-box a { color: var(--ic-theme, #444); text-decoration: none; }

/* Don, 2026-08-11: "the spacing above the other two boxes needs top
   padding to space it up off of the top border" -- .ic-about-box and
   .ic-readers-box are always the second box in their column, sitting
   right under the divider border the first box leaves behind; extra
   top padding just for them, beyond the shared .ic-box padding. */
.ic-about-box { background: #333333; color: #eee; flex: 1 1 auto; padding-top: 3.2cqw; }
.ic-about-box h3 { color: #fff; }
.ic-about-box a { color: #cfe0d0; word-break: break-all; }

.ic-readers-box { background: var(--ic-theme, #444); color: #f2f2f2; flex: 1 1 auto; padding-top: 3.2cqw; }
.ic-readers-box h3 { color: #fff; font-size: 2.4cqw; }
/* Don, 2026-08-11: "increase the font size of the special printed edition
   since that's really the only thing I care about them reading anyway." */
.ic-readers-box p { font-size: 2.1cqw; }

/* Ad pages, dev only (2026-08-11) -- clickable region is the bottom 25%
   of the page, full width, not the whole image. Don: "why don't we just
   make the bottom twenty five percent of the page clickable, anybody
   that's swiping is swiping in the middle of the page, not the bottom" --
   avoids a full-page link accidentally firing on a mobile swipe gesture,
   simpler and more forgiving than trying to hit-target just the "SHOP"
   button corner precisely (it isn't in the exact same spot on every
   creative anyway). */
.ad-page { position: relative; width: 100%; height: 100%; }
.ad-shop-hotspot { position: absolute; left: 0; right: 0; bottom: 0; height: 25%; }

/* The closing "thank you" page (type=outro), dynamic since 2026-08-12.
   Same container-query sizing as .ic-page so the copy scales with the page
   rather than the viewport, and the logo sits centred above the text.
   Copy comes from data/ssi/outro.html and is identical across all four
   titles; only --outro-theme changes per brand. */
.outro-page {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3cqw;
	background: var(--outro-bg, #fff);
	overflow: hidden;
	border-left: 10px solid var(--outro-theme, #444);
	container-type: inline-size;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
.outro-logo { width: 60%; max-width: 60%; height: auto; display: block; }
.outro-box { width: 74%; text-align: center; }
.outro-box h3 {
	font-size: 3cqw;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--outro-theme, #444);
	margin: 0 0 2cqw;
	text-align: center;
}
/* The site's global p { text-align: left } (line 13) sets text-align
   DIRECTLY on every <p> -- a direct rule always beats an ancestor's
   text-align: center no matter that ancestor's specificity, same bug already
   fixed for .fb-page-back .fb-credit p. .outro-box's own text-align:center
   above never reached the <p> inside it for exactly that reason. */
.outro-box p { font-size: 2.2cqw; line-height: 1.45; margin: 0 0 1.6cqw; text-align: center; }
.outro-box p:last-child { margin-bottom: 0; }
.outro-cta { font-weight: 600; color: var(--outro-theme, #444); }