/* Twitayr
================================================== */
/*
Author:             Iain Fergus
Author URL:         darkflaredesign.co.uk
Project URL:        twitayr.co.uk
Version:            1.0
Launch Date:		4th May 2014
Last Edited:        21st October 2026

Copyright 2014, Iain Fergus

*/


/* Table of Content
==================================================
	#Colours
	#Font-Face 
	#Site Styles
	#Media Queries
	#Print Styles
	*/
	
/* #Colours
==================================================

Black - #000
D.Grey - #222
Mid.Grey - #888
White - #FFF
Lilac - #A1A8DB
Orange - #EC7854
Pink - #CF6662

*/

/* #Font-Face
================================================== */

@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic);

/* #Site Styles
================================================== */

html {
	overflow-y: scroll;
}

body {
	background: #000;
	color: #FFF;
	font: 1em/1.5 'Source Sans Pro', Arial, Helvetica, Sans-Serif;
}

@media \0screen {img { width: auto }} /* Prevent height distortion in IE8. */

hr {
	border: 1px dotted #222;
	border-width: 0 0 1px;
	margin: 2em 0;
}

.double-top {
	margin: 4em 0 2em;
}

strong, b {
	font-weight: 700;
}

em, i {
	font-style: italic;
	font-weight: 300;
}

a, 
a:visited {
	color: #888;
	text-decoration: none;
}

a:focus, 
a:hover {
	color: #EC7854;
	text-decoration: underline;
}



.attendee-website,
[data-lightbox-title] {
	font-weight: 300;
	padding-bottom: 1px;
	border-bottom: 1px solid #EC7854;
}

.attendee-website:focus,
.attendee-website:hover,
[data-lightbox-title]:focus,
[data-lightbox-title]:hover {
	text-decoration: none;
}

.highlight {
	color: #A1A8DB;
}

.right ul {
	list-style-position: inside;
}


.header {  /* Under 544px */
	margin: 0 auto;
	padding: 20px 0 0;
	height: 340px;
	background: #A1A8DB url('../img/css/greenan-castle-bg-800px.jpg') -110px 0 no-repeat;
	background-size: 667px auto;
	color: #000;
}

	@media (max-width: 33.99em) and (min-device-pixel-ratio : 1.5) {
		.header {
			height: 340px;
			background: #A1A8DB url('../img/css/greenan-castle-bg-800px-@2x.jpg') -110px 0 no-repeat;
			background-size: 667px auto;
		}
	}
	
	@media (min-width: 34em) { /* 544px and above */
		.header {
			height: 400px;
			background: #A1A8DB url('../img/css/greenan-castle-bg-1000px.jpg') -150px -100px no-repeat;
			background-size: 933px auto;
		}
	}
	
	@media (min-width: 34em) and (min-device-pixel-ratio : 1.5) {
		.header {
			height: 400px;
			background: #A1A8DB url('../img/css/greenan-castle-bg-1000px-@2x.jpg') -150px -100px no-repeat;
			background-size: 933px auto;
		}
	}

	@media (min-width: 48em) { /* 767px and above */
		.header {
			height: 400px;
			background: #A1A8DB url('../img/css/greenan-castle-bg-1600px.jpg') -170px -200px no-repeat;
			background-size: 1200px auto;
		}
	}
	
	@media (min-width: 48em) and (min-device-pixel-ratio : 1.5) { 
		.header {
			height: 400px;
			background: #A1A8DB url('../img/css/greenan-castle-bg-1600px-@2x.jpg') -170px -200px no-repeat;
			background-size: 1200px auto;
		}
	}

	@media (min-width: 62em) { /* 992px and above */
		.header {
			height: 500px;
			background: #A1A8DB url('../img/css/greenan-castle-bg-1600px.jpg') -220px -260px no-repeat;
			background-size: 1500px auto;
		}
	}

	@media (min-width: 62em) and (min-device-pixel-ratio : 1.5) {
		.header {
			height: 500px;
			background: #A1A8DB url('../img/css/greenan-castle-bg-1600px-@2x.jpg') -220px -260px no-repeat;
			background-size: 1500px auto;
		}
	}

	@media (min-width: 75em) { /* 1200px and above */
		.header {
			height: 600px;
			background: #A1A8DB url('../img/css/greenan-castle-bg-2400px.jpg') -270px -300px no-repeat;
			background-size: 1800px auto;
		}
	}

	@media (min-width: 75em) and (min-device-pixel-ratio : 1.5) {
		.header {
			height: 600px;
			background: #A1A8DB url('../img/css/greenan-castle-bg-2400px-@2x.jpg') -270px -300px no-repeat;
			background-size: 1800px auto;
		}
	}
	
	@media (min-width: 100em) { /* 1600px and above */
		.header {
			max-width: 2000px;
			height: 700px;
			background: #A1A8DB url('../img/css/greenan-castle-bg-2400px.jpg') -270px -400px no-repeat;
			background-size: 2270px auto;
		}
	}
	
	@media (min-width: 100em) and (min-device-pixel-ratio : 1.5) {
		.header {
			max-width: 2000px;
			height: 700px;
			background: #A1A8DB url('../img/css/greenan-castle-bg-2400px-@2x.jpg') -270px -400px no-repeat;
			background-size: 2270px auto;
		}
	}

.header-logo {
	display: block;
	margin: 0 auto;
	padding: 10px 30px 30px;
	text-align: right;
	border: 0;
}

	@media (min-width: 34em) {
		.header-logo {
			padding: 0;
		}
	}
	
	@media (min-width: 48em) {
		.header-logo {
			padding: 0;
		}
	}
	
	@media (min-width: 62em) {
		.header-logo {
			margin-top: 60px;
		}
	}	
	
	@media (min-width: 75em) {
		.header-logo {
			margin-top: 100px;
		}
	}	

.header-logo img {}

.main {
	text-align: center;
}

.main p,
.main ul {
	font-size: 1.25em;
}

.heading {
	font-size: 1.5em;
	line-height: 1.2;
}

.heading.main {}

.no-margin {
	margin: 0;
}

.heading.sub {
	font-size: 1.25em;
	color: #A1A8DB;
	margin-top: 1.5em;
}

.heading.note {
	margin-top: 0;
	font-size: 1.25em;
	font-style: italic;
	font-weight: 300;
	color: #A1A8DB;
}

@media (min-width: 34em) {
	.heading.main {
		font-size: 2em;
	}
	.heading.sub,
	.heading.note {
		font-size: 1.75em;
	}
	.main p,
	.main ul {
		font-size: 1.5em;
	}
}

@media (min-width: 43em) {
	.heading.main {
		font-size: 2.25em;
	}
	.heading.sub,
	.heading.note {
		font-size: 2em;
	}
	.main p,
	.main ul {
		font-size: 1.75em;
	}
}

@media (min-width: 62em) {
	.heading.sub,
	.heading.note {
		font-size: 3em;
	}
	.heading.sub {
		font-size: 2.75em;
	}
	.main p,
	.main ul {
		font-size: 1.75em;
	}
}

@media (min-width: 75em) {
	.heading.main {
		font-size: 3.5em;
	}
	.heading.sub,
	.heading.note {
		font-size: 3.25em;
	}
	.main p,
	.main ul {
		font-size: 2em;
	}
}

.attendee {
	overflow: hidden;
	margin: 0;
	padding: 1px;
}

.attendee img {
	width: 100%;
	height: auto;
}
	@media (min-width: 62em) {
		.attendee img {
			max-width: 152px;
			max-height: 152px;
		}
	}
	
	@media (min-width: 75em) {
		.attendee img {
			max-width: 188px;
			max-height: 188px;
		}
	}
	
.attendee figcaption {
	padding: 1em 0;
	/*
	background: #111;
	background: rgba(255,255,255,0.05);
	*/
}

p.attendee-name {
	font-size: 0.85em;
	line-height: 1;
	margin: 0;
}

.attendee-website {
	font-size: 0.9em;
	line-height: 1.25;
}

.hashtag-link {
	font-weight: 700;
}


.hashtag-link:focus,
.hashtag-link:hover {
	text-decoration: none;
}


@media (min-width: 34em) {
	p.attendee-name {
		font-size: 1em;
	}
}

@media (min-width: 48em) {}

@media (min-width: 62em) {
	p.attendee-name {
		font-size: 0.9em;
	}
}

@media (min-width: 64em) {
	/*
	.attendee figcaption {
		opacity: 0.5;
	}

	.attendee figcaption:focus,
	.attendee figcaption:hover {
		opacity: 1;
	}
	*/
}

@media (min-width: 75em) {
	p.attendee-name {
		font-size: 0.9em;
	}
	
	.attendee-website {
		font-size: 1em;
	}
}



.footer {
	text-align: center;
}

.siteinfo {
	margin-bottom: 2em;
}

.siteinfo,
.siteinfo a,
.siteinfo a:visited {
	color: #A1A8DB;
	color: #888;
	border: none;
	text-decoration: none;
}

.siteinfo a:focus,
.siteinfo a:hover {
	color: #EC7854;
	color: #EC7854;
	text-decoration: underline;
}
.siteinfo small {
	display: block;
	font-size: 0.75em;
	line-height: 1.5;
	text-align: center;
}


/* #Media Queries
================================================== */

	/* Extra Small .col-xs-{number} — Up to 48em (768px at 16px/1em)*/
	@media (max-width: 47.99em) {}

	/* Small .col-s-{number} — 48em to 62em (768px to 992px at 16px/1em)*/
	@media (min-width: 48em) and (max-width: 61.99em) {}
	
	/* Medium .col-m-{number} — 62em to 75em (992px to 1200px at 16px/1em)*/
	@media (min-width: 62em) and (max-width: 74.99em) {}
	
	/* Large .col-l-{number} — 75em and over (1200px at 16px/1em)*/
	@media (min-width: 75em) {}
	
	
/* #Print Styles
================================================== */

	@media print {
		* {
			color:#000 !important;
			box-shadow:none !important;
			text-shadow:none !important;
			background:transparent !important;
		}
		html {
			background-color:#fff;
		}
		/* Hide navigation */
		nav { display:none; }

		/* Show link destinations in brackets after the link text */
		a[href]:after { content: " (" attr(href) ") "; }
		a[href] {
			font-weight:bold;
			text-decoration:underline;
			color:#06c;
			border:none;
		}
		/* Don't show link destinations for JavaScript or internal links */ 
		a[href^="javascript:"]:after, a[href^="#"]:after {
			content:"";
		}
		
		/* Show abbr title value in brackets after the text */
		abbr[title]:after {
			content: " (" attr(title) ")";
		}

		figure { 
			margin-bottom:1em; 
			overflow:hidden;
		}

		figure img { border:1px solid #000; }

	}
/* Twitayr membership rankings — 2026
================================================== */
.membership-intro,
.membership-disclaimer {
    color: #aaa;
    font-size: 0.9rem !important;
    line-height: 1.5;
}

.membership-intro { margin: 0.65rem 0 1.5rem; }
.membership-disclaimer { margin: 1.5rem auto 0; max-width: 45rem; }

.attendee-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 0.8rem;
    margin-inline: auto;
}
.attendee-grid--originals { max-width: 68rem; }
.attendee-grid--newcomers { max-width: 28rem; margin-top: 2rem; }

/* Keep cards independent of the older 12-column float grid. */
.attendee-grid .attendee { min-width: 0; overflow: visible; padding: 0; margin: 0; }
.attendee-photo-frame {
    box-sizing: border-box;
    position: relative;
    aspect-ratio: 1;
    overflow: visible;
    border: 4px solid #c5d2dc;
    border-radius: 3px;
    background: #111;
}
.attendee-grid .attendee-photo-frame img {
    box-sizing: border-box;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
}
.attendee--platinum .attendee-photo-frame { border-color: #c5d2dc; }
.attendee--bronze .attendee-photo-frame {
    border: 3px solid #a96a40;
    /* The entire photo frame (including its bronze border and rosette) shrinks. */
    animation: new-guy-shrink 120s ease-in forwards;
    transform-origin: center center;
}
.attendee--gold .attendee-photo-frame {
    border: 5px solid #f0c652;
    box-shadow: 0 0 0 2px rgba(240,198,82,.25), 0 0 17px rgba(240,198,82,.30);
}
@keyframes new-guy-shrink {
    from { transform: scale(1); }
    to { transform: scale(.15); }
}
@media (prefers-reduced-motion: reduce) {
    .attendee--bronze .attendee-photo-frame { animation: none; }
}
.attendee-grid .attendee figcaption {
    min-height: 7rem;
    box-sizing: border-box;
    padding: .85rem .4rem .9rem;
}
/*
.attendee-grid .attendee--bronze figcaption { background: rgba(169,106,64,.09); }
.attendee-grid .attendee--gold figcaption { background: rgba(240,198,82,.11); }
*/
.attendee-grid .attendee .attendee-name {
    line-height: 1.3;
    margin: .5rem 0 0;
}
.attendee-status {
    display: block;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 700;
    font-size: .62rem;
    line-height: 1.4;
    color: #c5d2dc;
}
.attendee--bronze .attendee-status { color: #db9e72; }
.attendee--gold .attendee-status { color: #f0c652; }
.attendee-grid .attendee .attendee-link,
.attendee-grid .attendee .attendee-note {
    font-size: .82rem !important;
    line-height: 1.45;
}
.attendee-grid .attendee .attendee-link { margin: .7rem 0 0; }
.attendee-grid .attendee .attendee-note { margin: .35rem 0 0; color: #bcbcbc; }
.attendee-rosette {
    position: absolute;
    z-index: 2;
    top: -.85rem;
    right: -.7rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 3.35rem;
    height: 3.35rem;
    border-radius: 50%;
    background: #a96a40;
    border: 3px double #f2d0ad;
    box-shadow: 0 2px 9px rgba(0,0,0,.5);
    color: #fff5e9;
    line-height: 1.05;
    transform: rotate(10deg);
}
.attendee-rosette::before,
.attendee-rosette::after {
    content: '';
    position: absolute;
    z-index: -1;
    top: 2.6rem;
    width: 1.3rem;
    height: 2rem;
    background: #a96a40;
    clip-path: polygon(0 0,100% 0,100% 100%,50% 75%,0 100%);
}
.attendee-rosette::before { left: .25rem; transform: rotate(18deg); }
.attendee-rosette::after { right: .25rem; transform: rotate(-18deg); }
.attendee-rosette strong { font-size: 1.4rem; font-weight: 700; }
.attendee-rosette small { font-size: .52rem; letter-spacing: .09em; font-weight: 700; }

@media (min-width: 48em) {
    .attendee-grid--originals { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 62em) {
    .attendee-grid--originals { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .attendee-grid--newcomers { max-width: 29rem; }
}
@media (max-width: 24em) {
    .attendee-grid { gap: .8rem .55rem; }
    .attendee-status { font-size: .55rem; }
    .attendee-rosette { width: 2.7rem; height: 2.7rem; }
    .attendee-rosette::before,.attendee-rosette::after { top: 2rem; }
}
