/*-COLOUR-*/
.bgEAPink{background-color:#FFBDC6;}
.bgEATeal{background-color:#008577;}
.bgEABlack{background-color:#141414;}
.bgEADenim{background-color:#004452;}
.bgEALinen{background-color:#FFF7ED;}
.bgEAWhite{background-color:#ffffff;}

.textEAPink{color:#FFBDC6;}
.textEATeal{color:#008577;}
.textEABlack{color:#141414;}
.textEADenim{color:#004452;}
.textEALinen{color:#FFF7ED;}
.textEAWhite{color:#ffffff;}

/*-BORING-*/
html{margin:0;padding:0;height:auto;}

body{
background:#FFF7ED;
margin:0 auto;
width:100%;
max-width:1280px;
box-sizing:border-box;
padding:12px;
font-family: 'Roboto Mono', monospace;
font-style:normal;
font-size:72%;
color:black;
text-align:left;
}

/*-TEXT-*/

.header{
font-family:'Roboto Serif',serif;
font-style:italic;
}

.emf{font-style:italic;font-weight:bold}

h1{
font-size:420%;
font-weight:700;
font-style:italic;
margin:-8px 0 -16px;
padding:0;
}

h2{
font-size:165%;
margin:0;
padding:6px 2px;
}

h3{
font-size:200%;
font-weight:600;
margin:1em 0 1rem
}

h4{
font-size:150%;
font-weight:600;
margin:1em 0;
}

h5{
font-size:120%;
font-weight:600;
margin:2px 2px 16px;
}

.topandtail{
display:flex;
flex-direction:row;
flex-wrap:wrap;
overflow-y:hidden;
justify-content:space-between;
align-items: flex-end;
gap:1em;
line-height:1.25;
}

.navrow {
display: grid;
grid-template-columns: 100px 1fr;
}

.middlefiddle{
text-align:center;
align-items:center;
}

.churn{
text-align:center;
align-items:center;
vertical-align: middle;
font-size:18px;
line-height: 1;
}

.noclick{
pointer-events:none;
user-select:none;
}

.nodec{
text-decoration: none;
user-select:none;
}

img{
max-width:100%;
}

.casual{
text-transform: lowercase;
}

/*-----OFFER-----*/
.offerflex {
display: flex;
flex-wrap: wrap;
gap: 0.5em;
margin: 0;
padding: 0;
justify-content: center;
}

.offer{
position: relative;
flex: 1 1 49%;
margin: 0;
overflow: hidden;
}

.offer img{
width: 100%;
aspect-ratio: 7/3;
object-fit: cover;
display: block;
}

.offer h3 {
position: absolute;
inset:0;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
padding: 1em;
text-align: center;
text-shadow: 0 0 12px #141414, 0 0 2px #141414;
font-family: 'Roboto Serif', serif;
font-style: italic;
font-weight: 600;
font-size: 2rem;
line-height: 1.2;
white-space: pre-line;
}

.tripflex {
display: flex;
flex-wrap: wrap;
gap: 0.3em;
justify-content:left;
}

.tripflex img{width:calc(50vw - 12px - 0.3em);max-width:206px;}

/* Mobile stacking */
@media (max-width: 768px) {
.offer {flex: 1 1 100%;}
.optional{display:none;}
}

table{
border-collapse:collapse;
table-layout:auto;
width:100%;
}

table th,
table td{
padding: 0.3em 0.8em;
border-bottom: 1px solid #aaa;
}

tr:last-child {border-bottom: none;}

.nowrap{
white-space:nowrap;
}

.iconbrand{
width:46px;
height:46px;
margin:2px 0 -2px;
fill:currentColor;
}

.iconmini{
width:1rem;
height:1rem;
margin:1px 0px -3px 2px;
fill:currentColor;
}

.dim{opacity:0.2;}

.youtube{
width:100%;
height:400px;
box-sizing:border-box;
}

audio{
max-height:24px;
width:100%;
min-width:64px;
max-width:120px;
}

a:link{color:#008577}
a:visited{color:#008577}
a:hover{color:#004452}
a:active{color:#004452}

.contactflex {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 500px;
}

.contactflex label {
  font-weight: bold;
  margin:1em 0 -1em;
  display: block;
}

.contactflex input,
.contactflex textarea {
  padding: 1em;
  border: none;
  border-radius: 6px;
  font: inherit;
  width:100%;
  resize:none;
}

.contactflex button {
  padding: 1em;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  width:6em;
}

.contacterror{outline:2px solid red !important}

.scoresheet td{
border: 1px solid black;
padding:3px 6px;
min-width: 16px;
}

.scoresheet{
overflow-x: auto;
display: block;
}

.textbaggored{color:#F02D3D;}
.textbaggoblue{color:#006BB8;}

.baggoscore{
display: grid;
border:3px double black;
border-radius:3px;
grid-template-columns: repeat(3, 46px);
text-align: center;
gap: 6px;
padding:12px;
width:152px;
margin:18px 36px;
}

.baggoscore select{text-align: center;}
.baggoscore h1 {grid-column: 1 / span 3;}

/*-- CONTACT SHEET --*/

.contactsheet {
max-height:84vh;
aspect-ratio:10/12;
overflow-x:hidden;
overflow-y:auto;
display:flex;
flex-direction:column;
gap:6px;
margin:-10px auto;
background-color:black;
padding: 1.5%;
box-sizing: border-box;
box-shadow: 0 0 10px 0 rgba(255,255,255,0.1);
}

.contactsheet section{
display:grid;
grid-template-columns: repeat(5, 1fr);
gap:6px;
padding:6px;
background-color:#222;
filter:contrast(1.1)
}

.contactsheet section a {
width:100%;
}

.contactsheet img {
display: block;
width:100%;
max-width:168px;
aspect-ratio: 3/2;
object-fit: cover;
position: relative;
z-index: 1;
border-radius: 1px;
}

.contactsheet a.rejected,
.contactsheet a.flagged,
.contactsheet a.discarded {
  position: relative;
  display: block;
}

.contactsheet a.rejected::after,
.contactsheet a.flagged::after,
.contactsheet a.discarded::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  aspect-ratio: 3/2;
  width: 100%;
  background-image: var(--overlay-image);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none; /* clicks pass through */
  z-index: 2;
  mix-blend-mode: multiply;
  opacity:0.9;
}

.contactsheet a.discarded{background-color: #eeeeee;}

/*--- lightboxlovely ---*/
#lightboxlovely {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.2s ease-in-out;
}

#lightboxlovely img {
  max-width: 90vw;
  max-height: 90vh;
  box-shadow: 0 0 0 14px white;
  object-fit: contain;
  cursor: zoom-out;
  opacity:0;
  transition: opacity 0.2s ease-in-out;
}

figcaption{
font-family: 'Roboto Mono', monospace;
font-size:80%;
text-transform: uppercase;
color:#FCF0E4;
mix-blend-mode:hard-light;
text-align-last: justify;
letter-spacing: 0.2vw;
white-space: nowrap;
}

.contactsheetnav{
display:flex;
align-items:center;
justify-content:space-between;
}

.contactsheetnav h3{margin-right:10vw}

.contactsheetnav span{
font-size:4em;
cursor: pointer;
user-select: none;
}

.contactsheetnav span a{text-decoration: none;}
.contactsheetnav span.dim{cursor:default;pointer-events:none;}