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: 1100px; 
}
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: 30px 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; }

/* Issue landing pages, 2026-08-11 (Don): cover image left (fixed width,
   never shrinks -- it's the point of the page), caption + description
   right (text scales down with clamp() as the column narrows, rather
   than the cover shrinking). Ported from trailphotographers.com, where
   this was worked out and signed off first. VIEW MAGAZINE ONLINE / ORDER
   PRINTED COPY buttons are gone -- the cover image is the only
   click-through now. */
.issue-cover-link {
	display: inline-block;
	transition: transform .15s;
}
.issue-cover-link img { display: block; }
.issue-cover-link:hover { transform: scale(1.02); }
.issue-cover-caption {
	display: block;
	margin-top: 10px;
	color: #222222 !important;
	font-size: .85rem;
	text-decoration: underline;
}
.issue-cover-caption:hover { color: #6B0F1A !important; }
.issue-hero {
	display: flex;
	align-items: flex-start;
	gap: 5%;
	max-width: 1020px;
	margin: 0 auto;
}
.issue-hero-cover { flex: 0 0 400px; text-align: center; }
.issue-hero-cover img { display: block; max-width: 100%; }
.issue-hero-cover .issue-cover-caption { margin-top: 0; padding-top: 0; }
.issue-hero-info { flex: 1 1 auto; min-width: 0; }
.issue-hero-info h2 { margin: 30px 0 10px; }
.issue-hero-info p {
	text-align: left;
	width: 100%;
	margin: 0;
	font-size: clamp(.75rem, .55rem + 1vw, .95rem);
	line-height: 1.4em;
	padding-bottom: 0;
}
.issue-hero-info p .issue-cover-caption { display: inline; margin-top: 0; }

/* Same breakpoint as .photog-grid below -- Don's call: the cover split and
   the contributor grid should go to one column at the same width.
   915px measured empirically for this site, not assumed from
   trailphotographers.com's number (its wrapper padding differs). */
@media screen and (max-width: 915px) {
	.issue-hero { flex-direction: column; align-items: center; }
	.issue-hero-cover { flex: 0 0 auto; width: 100%; max-width: 400px; }
	.issue-hero-info { width: 100%; }
	.issue-hero-info p { font-size: .9rem; }
}

  .photog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 24px;
    max-width: 1150px;
    margin: 40px auto;
    padding: 0 15px;
  }
  .photog-item {
    display: flex;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    align-items: flex-start;
    overflow: hidden;
  }
  .photog-thumb-link {
    display: block;
    flex-shrink: 0;
    overflow: hidden;
    width: 140px;
    height: 140px;
  }
  .photog-thumb {
    width: 140px;
    height: 140px;
    object-fit: cover;
    object-position: center center;
    transform: scale(1.25);
  }
  .photog-info {
    padding: 18px;
    padding-left: 24px;
    padding-bottom: 0;
    flex: 1;
    font-size: 0.9em;
    line-height: 1.2;
  }
  .photog-info a { color: #999; font-weight: normal; font-size: 0.8em; line-height: 1.8; }
  .photog-name { font-weight: bold; }
  .photog-title { color: #555; }
  .photog-location { font-style: italic; color: #888; font-weight: 100; font-size: 0.9em; }

  @media (max-width: 768px) {
    .photog-grid {
      grid-template-columns: 1fr;
    }
    .photog-item {
      flex-direction: row;   /* keep side-by-side */
      flex-wrap: nowrap;
    }
    .photog-thumb {
      width: 100%;
      height: auto;
      flex-shrink: 0;
    }
    .photog-info {
      padding: 6px;
    }
  }


/* Back-issue card grid (homepage) */
.issue-list { max-width: 1100px; margin: 20px auto; padding: 0 20px; }
.issue-card { display: flex; flex-wrap: wrap; gap: 40px; justify-content: center; }
.card { flex: 1 1 300px; max-width: 350px; background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 20px rgba(0,0,0,0.12); transition: transform 0.25s ease, box-shadow 0.25s ease; }
.card img { width: 100%; height: auto; display: block; }
.card div { padding: 20px; text-align: center; }
.card h3 { margin: 0 0 8px; font-size: 1.2em; color: #333; }
.card:hover { transform: translateY(-8px); box-shadow: 0 16px 40px rgba(0,0,0,0.18); }


/* Magazine issue-landing page (cgi-bin/mag.co2 DisplayIssueLanding). Don,
   2026-08-15: "update the header and several other in-line css crap
   out of there and into magstyle css." Compound selectors below
   (.content-white.landing-header etc.) are deliberate, not decoration
   -- .content-white/.content-black/.more a already carry real rules
   here (background, button colors per container), so a bare new class
   alone loses the specificity fight and silently does nothing; pairing
   it with the existing class wins without needing !important, except
   the one button rule below where the container can be any of three
   different classes across real issues. */
#main.landing-page { background-color: #CCCCCC; }
.content-white.landing-header {
	background: #ffffff;
	max-width: 1100px;
	margin: 0 auto;
	text-align: center;
	padding: var(--header-padding, 20px);
}
/* Height-capped, not just width -- a wide source file must never dominate the header regardless of its native size. */
.landing-header-logo { max-width: 90%; max-height: 100px; width: auto; height: auto; margin: 0 auto; }

div.content-black.landing-hero {
	/* Don, 2026-08-17: plain ".landing-hero" (specificity 0-1-0) lost every
	   time to "div.content-black" (0-1-1) below it, which always wins
	   regardless of source order -- its flat #333333 silently ate this
	   rule's entire background shorthand (image, gradient, theme color),
	   on every site. Qualifying with both class + element to outrank it. */
	background-color: var(--hero-bg-color);
	background: linear-gradient(var(--hero-overlay), var(--hero-overlay)), var(--hero-image) center/cover no-repeat fixed;
}
.landing-hero-title { color: var(--hero-h1-color, #eee); }

.landing-cta { margin: 20px; }
.landing-cta-bottom { margin: 80px; }
/* Must render identically regardless of which content-white/black/grey
   ancestor wraps it (all three occur across real issues via WI_CLASS)
   -- overriding that ancestor's own div.content-X div.more a rule by
   design, not by accident. */
.landing-cta a.landing-cta-btn { background-color: #ccc !important; color: #333 !important; }

.threecol1 h4 { margin-bottom: 5px; }
.threecol1 ul { margin-top: 0; }

.content-white.landing-copyright { color: var(--copyright-color, #999999); }
.inherit-color { color: inherit; }