/*
Theme Name: Chris Wooley Comedy
Theme URI: https://chriswooleycomedy.com
Author: Chris Wooley Comedy
Description: A bold, editorial one-page theme for stand-up comedian Chris Wooley. Shows, video clips, credits and booking are all editable from the WordPress admin.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: chris-wooley
Tags: one-column, custom-menu, custom-logo, editor-style, full-width-template
*/
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f5f1e9;color:#101010;font-family:Inter,Arial,sans-serif}a{color:inherit;text-decoration:none}img{width:100%;display:block}.header{position:absolute;z-index:10;top:0;left:50%;transform:translateX(-50%);width:min(1200px,100%);padding:28px;display:flex;justify-content:space-between;align-items:center;color:#fff}.brand{font:400 22px/.82 Anton,sans-serif;letter-spacing:.03em}.nav{display:flex;gap:30px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}.nav a:hover,.hero-social a:hover{text-decoration:underline}.menu{display:none;background:none;border:0;color:#fff}.menu span{display:block;width:25px;height:2px;background:currentColor;margin:5px}.hero{min-height:850px;background:#090909;color:#fff;display:grid;grid-template-columns:1fr 1fr;gap:70px;padding:140px max(28px,calc((100vw - 1144px)/2)) 80px;align-items:center}.hero-copy{padding-bottom:15px}.kicker,.label{font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase}.hero h1,h2{font-family:Anton,sans-serif;font-weight:400;line-height:.84;letter-spacing:-.025em;margin:22px 0}.hero h1{font-size:clamp(90px,12vw,165px)}.hero h1 em{font-style:normal;color:#a8a8a8}.hero-line{max-width:500px;color:#ccc;font-size:17px;line-height:1.5}.buttons{display:flex;gap:12px;margin:32px 0}.btn{display:inline-block;padding:15px 22px;border:1px solid;font-size:11px;font-weight:800;letter-spacing:.14em}.light{background:#f5f1e9;color:#111}.outline{color:#fff}.dark{background:#111;color:#fff}.btn:hover{transform:translateY(-2px)}.hero-social{display:flex;gap:18px;margin-top:38px;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#aaa}.hero-photo{aspect-ratio:4/5;overflow:hidden;background:#222}.hero-photo img{height:100%;object-fit:cover;object-position:center}.section{max-width:1144px;margin:auto;padding:120px 28px}.about{border-bottom:1px solid #d6d0c5}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:90px;margin-top:30px}.section h2,.credits h2,.booking h2{font-size:clamp(75px,9vw,125px)}.copy{padding-top:20px;max-width:550px}.big{font-size:22px;line-height:1.4}.copy p{line-height:1.7}.arrow-link{display:inline-block;margin-top:20px;border-bottom:1px solid;padding-bottom:6px;font-size:11px;font-weight:800;letter-spacing:.15em}.stats{display:grid;grid-template-columns:repeat(3,1fr);background:#aaa;color:#111}.stats div{padding:50px 35px;border-right:1px solid #888}.stats div:last-child{border:0}.stats strong{display:block;font:400 48px Anton}.stats span{display:block;margin-top:5px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.1em}.section-head{display:flex;align-items:end;justify-content:space-between;gap:30px}.section-head p{max-width:300px;color:#666}.show{display:grid;grid-template-columns:120px 1fr auto;align-items:center;border-top:1px solid #ccc;padding:30px 0}.date{display:flex;align-items:baseline;gap:8px}.date b{font-size:11px}.date strong{font:400 42px Anton}.event{font-weight:800;letter-spacing:.04em}.meta,.private{font-size:10px;letter-spacing:.12em;color:#777;margin-top:5px}.private{border:1px solid #aaa;padding:9px 12px}.show-note{font-size:12px;color:#777;padding-top:20px}.videos{background:#101010;color:#fff;max-width:none;padding-left:max(28px,calc((100vw - 1144px)/2));padding-right:max(28px,calc((100vw - 1144px)/2))}.videos .section-head p{color:#aaa}.video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:35px}.video-placeholder{aspect-ratio:16/9;background:#252525;display:grid;place-items:center;border:1px solid #3a3a3a}.video-placeholder span{width:58px;height:58px;border:1px solid #aaa;border-radius:50%;display:grid;place-items:center;color:#fff;padding-left:4px}.video-grid h3{font-size:12px;letter-spacing:.1em;margin-bottom:4px}.video-grid p{font-size:11px;color:#999}.credits{padding:120px max(28px,calc((100vw - 1144px)/2));background:#aaa}.names{display:flex;flex-wrap:wrap;gap:12px;margin-top:45px}.names span{font:400 clamp(26px,4vw,50px) Anton;border-bottom:1px solid #777}.credit-extra{margin-top:35px;font-size:15px}.booking{background:#d6d0c5;padding:120px 28px;text-align:center}.booking h2{margin:25px auto;font-size:clamp(75px,10vw,140px)}.booking p{margin:0 0 35px;font-size:14px;text-transform:uppercase;letter-spacing:.1em}.contact-card{padding-top:30px}.contact-card p{font-size:10px;font-weight:800;letter-spacing:.15em;color:#777}.contact-card>a{font-size:clamp(20px,3vw,32px);font-weight:700;border-bottom:1px solid}.contact-social{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:45px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}footer{background:#090909;color:#fff;padding:40px max(28px,calc((100vw - 1144px)/2));display:grid;grid-template-columns:1fr 1fr auto;gap:20px;font-size:10px;letter-spacing:.12em}footer strong{font:400 22px Anton}footer span{color:#999}footer small{color:#777;text-align:right}@media(max-width:800px){.header{padding:22px 20px}.menu{display:block}.nav{display:none;position:absolute;top:70px;left:20px;right:20px;background:#f5f1e9;color:#111;padding:20px;flex-direction:column;gap:18px}.nav.open{display:flex}.hero{grid-template-columns:1fr;min-height:auto;padding:120px 20px 50px;gap:35px}.hero h1{font-size:clamp(82px,24vw,135px)}.hero-photo{max-width:650px}.hero-social{flex-wrap:wrap}.section{padding:80px 20px}.two-col{grid-template-columns:1fr;gap:20px}.section-head{display:block}.section-head p{margin-top:0}.stats{grid-template-columns:1fr}.stats div{border-right:0;border-bottom:1px solid #888;padding:32px 25px}.show{grid-template-columns:75px 1fr;gap:10px}.private{grid-column:2;justify-self:start}.video-grid{grid-template-columns:1fr}.credits{padding:80px 20px}.booking{padding:80px 20px}.contact-social{grid-template-columns:1fr}footer{grid-template-columns:1fr;padding:35px 20px}footer small{text-align:left}}
.video-grid{align-items:start}
.video-card h3{margin:18px 0 5px}
.video-card p{margin:0;color:#888;font-size:11px}
.video-frame{aspect-ratio:16/9;background:#181818}
.video-frame iframe{width:100%;height:100%;border:0}
.social-video{aspect-ratio:16/9;background:#252525;border:1px solid #3a3a3a;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;transition:transform .2s ease,background .2s ease}
.social-video:hover{transform:translateY(-3px);background:#303030}
.social-video span{width:58px;height:58px;border:1px solid #aaa;border-radius:50%;display:grid;place-items:center;font-size:28px;font-weight:800}
.social-video small{font-size:10px;letter-spacing:.15em;color:#bbb}

/* ---------- WordPress additions ---------- */
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link:focus{position:fixed;top:10px;left:10px;width:auto;height:auto;clip:auto;z-index:100000;background:#fff;color:#111;padding:12px 18px;font-weight:800}
body.admin-bar .header{top:32px}
@media(max-width:782px){body.admin-bar .header{top:46px}}
.nav a.current,.nav .current-menu-item>a{text-decoration:underline}
.menu-toggle{display:none}
.nav ul{list-style:none;display:flex;gap:30px;margin:0;padding:0}
@media(max-width:800px){.nav ul{flex-direction:column;gap:18px}}
.hero-photo img{width:100%}
.show a.ticket-link{display:inline-block;margin-top:6px;font-size:10px;font-weight:800;letter-spacing:.12em;border-bottom:1px solid}
.video-card a{display:block}

/* Inner pages / posts / archives */
.page-wrap{max-width:820px;margin:auto;padding:190px 28px 110px}
.page-wrap.dark-top{padding-top:190px}
.page-wrap h1{font-family:Anton,sans-serif;font-weight:400;line-height:.9;font-size:clamp(48px,7vw,86px);letter-spacing:-.02em;margin:0 0 30px}
.page-wrap h2{font-size:clamp(30px,4vw,46px);margin:40px 0 16px}
.page-wrap h3{font-size:22px;margin:32px 0 12px}
.entry-content{font-size:17px;line-height:1.75}
.entry-content p,.entry-content ul,.entry-content ol{margin:0 0 22px}
.entry-content a{border-bottom:1px solid}
.entry-content img,.entry-content .wp-block-image img{height:auto}
.entry-meta{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#777;margin-bottom:26px}
.post-list{list-style:none;margin:0;padding:0}
.post-list li{border-top:1px solid #d6d0c5;padding:26px 0}
.post-list h2{font-size:clamp(26px,3.5vw,40px);margin:0 0 8px}
.pagination{display:flex;gap:12px;margin-top:40px;font-size:12px;font-weight:800;letter-spacing:.1em}
.pagination .page-numbers{padding:10px 14px;border:1px solid #bbb}
.pagination .current{background:#111;color:#fff;border-color:#111}
.page-header-strip{background:#090909;color:#fff;padding:170px max(28px,calc((100vw - 1144px)/2)) 70px}
.page-header-strip h1{font-family:Anton,sans-serif;font-weight:400;font-size:clamp(52px,8vw,110px);line-height:.86;margin:14px 0 0}
.alignwide,.alignfull{max-width:100%}
.wp-block-quote{border-left:3px solid #111;padding-left:22px;margin:30px 0;font-size:20px}
@media(max-width:800px){.page-wrap{padding:130px 20px 80px}.page-header-strip{padding:130px 20px 55px}}

/* ==========================================================================
   v1.1 — animated links, animated buttons, social buttons, clip thumbnails,
   credits photos, biography layout, merged booking/contact + enquiry form.
   ========================================================================== */

:root {
	--cw-ink: #101010;
	--cw-cream: #f5f1e9;
	--cw-tan: #d6d0c5;
	--cw-ease: cubic-bezier(.2, .7, .3, 1);
}

/* --------------------------------------------------------------------------
   1. Animated underlines
   Replaces the old text-decoration hover with a bar that wipes in from the
   left and out to the right.
   -------------------------------------------------------------------------- */

.nav a:hover,
.hero-social a:hover {
	text-decoration: none;
}

.link-anim,
.nav a,
.arrow-link,
.contact-card > a,
.cw-form__actions a {
	position: relative;
	display: inline-block;
	text-decoration: none;
}

.link-anim::after,
.nav a::after,
.arrow-link::after,
.contact-card > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -3px;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform .38s var(--cw-ease);
}

.link-anim:hover::after,
.link-anim:focus-visible::after,
.nav a:hover::after,
.nav a:focus-visible::after,
.arrow-link:hover::after,
.arrow-link:focus-visible::after,
.contact-card > a:hover::after,
.contact-card > a:focus-visible::after {
	transform: scaleX(1);
	transform-origin: left center;
}

/* The two links that already had a permanent rule get a thicker animated one
   sitting on top of a faint static one. */
.arrow-link,
.contact-card > a {
	border-bottom: 0;
	padding-bottom: 6px;
}

.arrow-link::before,
.contact-card > a::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -3px;
	height: 1px;
	background: currentColor;
	opacity: .28;
}

.arrow-link::after,
.contact-card > a::after {
	height: 2px;
	bottom: -3.5px;
}

.arrow-link__arrow {
	display: inline-block;
	margin-left: 8px;
	transition: transform .38s var(--cw-ease);
}

.arrow-link:hover .arrow-link__arrow,
.arrow-link:focus-visible .arrow-link__arrow {
	transform: translateX(6px);
}

/* --------------------------------------------------------------------------
   2. Buttons
   A colour panel wipes up behind the label, the button lifts, the shadow
   deepens. z-index:-1 with isolation keeps the fill behind the text.
   -------------------------------------------------------------------------- */

.btn {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border-radius: 0;
	cursor: pointer;
	font-family: inherit;
	text-align: center;
	transition:
		transform .3s var(--cw-ease),
		color .3s ease,
		border-color .3s ease,
		box-shadow .3s var(--cw-ease);
}

.btn > span {
	position: relative;
	z-index: 1;
}

.btn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	transform: scaleY(0);
	transform-origin: bottom center;
	transition: transform .36s var(--cw-ease);
}

.btn:hover::before,
.btn:focus-visible::before {
	transform: scaleY(1);
}

.btn:hover,
.btn:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 12px 26px rgba(0, 0, 0, .2);
}

.btn:active {
	transform: translateY(-1px);
	box-shadow: 0 6px 14px rgba(0, 0, 0, .18);
}

.btn.light {
	background: var(--cw-cream);
	color: #111;
	border-color: var(--cw-cream);
}

.btn.light::before {
	background: #111;
}

.btn.light:hover,
.btn.light:focus-visible {
	color: var(--cw-cream);
	border-color: #111;
}

.btn.outline {
	color: #fff;
	border-color: rgba(255, 255, 255, .5);
}

.btn.outline::before {
	background: var(--cw-cream);
}

.btn.outline:hover,
.btn.outline:focus-visible {
	color: #111;
	border-color: var(--cw-cream);
}

.btn.dark {
	background: #111;
	color: #fff;
	border-color: #111;
}

.btn.dark::before {
	background: var(--cw-cream);
}

.btn.dark:hover,
.btn.dark:focus-visible {
	color: #111;
	border-color: #111;
}

/* --------------------------------------------------------------------------
   3. Social buttons
   -------------------------------------------------------------------------- */

.cw-socials {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cw-social {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 11px 16px;
	border: 1px solid;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: none;
	transition:
		transform .28s var(--cw-ease),
		background-color .28s ease,
		color .28s ease,
		border-color .28s ease,
		box-shadow .28s var(--cw-ease);
}

.cw-social .cw-icon {
	flex: none;
	transition: transform .34s var(--cw-ease);
}

.cw-social:hover,
.cw-social:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 10px 22px rgba(0, 0, 0, .18);
}

.cw-social:hover .cw-icon,
.cw-social:focus-visible .cw-icon {
	transform: scale(1.14);
}

/* Ghost: on the dark hero and footer. */
.cw-socials--ghost .cw-social {
	color: #fff;
	border-color: rgba(255, 255, 255, .34);
	background: rgba(255, 255, 255, .04);
}

.cw-socials--ghost .cw-social:hover,
.cw-socials--ghost .cw-social:focus-visible {
	background: var(--cw-cream);
	border-color: var(--cw-cream);
	color: #111;
}

/* Solid: on the light booking panel. */
.cw-socials--solid .cw-social {
	color: #111;
	border-color: rgba(17, 17, 17, .3);
	background: rgba(255, 255, 255, .5);
}

.cw-socials--solid .cw-social:hover,
.cw-socials--solid .cw-social:focus-visible {
	background: #111;
	border-color: #111;
	color: var(--cw-cream);
}

.hero-social {
	display: block;
	margin-top: 34px;
	color: inherit;
}

.footer-social .cw-socials {
	gap: 8px;
}

.footer-social .cw-social {
	padding: 9px 13px;
	font-size: 10px;
}

/* --------------------------------------------------------------------------
   4. Clip thumbnails
   -------------------------------------------------------------------------- */

.video-frame {
	position: relative;
	overflow: hidden;
}

.video-thumb {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: #181818;
	cursor: pointer;
	overflow: hidden;
}

.video-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .55s var(--cw-ease), opacity .3s ease;
}

.video-thumb::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 55%);
	opacity: .75;
	transition: opacity .3s ease;
}

.video-card:hover .video-thumb img,
.video-thumb:focus-visible img {
	transform: scale(1.06);
}

.video-card:hover .video-thumb::after {
	opacity: .45;
}

.video-thumb__fallback {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background:
		radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .07), transparent 62%),
		#232323;
	color: rgba(255, 255, 255, .34);
	font-size: 86px;
	font-weight: 800;
	line-height: 1;
	padding-bottom: 14px;
}

.video-play {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 2;
	width: 62px;
	height: 62px;
	margin: -31px 0 0 -31px;
	display: grid;
	place-items: center;
	border: 1px solid rgba(255, 255, 255, .8);
	border-radius: 50%;
	background: rgba(15, 15, 15, .42);
	color: #fff;
	padding-left: 4px;
	backdrop-filter: blur(2px);
	transition:
		transform .34s var(--cw-ease),
		background-color .3s ease,
		border-color .3s ease,
		color .3s ease;
}

.video-card:hover .video-play,
.video-thumb:focus-visible .video-play,
.video-frame--link:focus-visible .video-play {
	transform: scale(1.12);
	background: var(--cw-cream);
	border-color: var(--cw-cream);
	color: #111;
}

.video-frame--link {
	display: block;
}

.video-frame.is-playing .video-thumb,
.video-frame.is-playing .video-play {
	display: none;
}

.video-hint {
	margin-top: 8px !important;
	font-size: 11px;
}

.video-hint a {
	color: #c9c2b4;
}

/* --------------------------------------------------------------------------
   5. Biography
   -------------------------------------------------------------------------- */

.bio-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 90px;
	margin-top: 30px;
}

.bio-photo {
	margin: 34px 0 0;
	aspect-ratio: 4/5;
	overflow: hidden;
	background: #ddd7cb;
}

.bio-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .7s var(--cw-ease);
}

.bio-photo:hover img {
	transform: scale(1.04);
}

.bio-copy p {
	line-height: 1.7;
}

.bio-pullquote {
	margin: 34px 0;
	padding-left: 22px;
	border-left: 2px solid #111;
	font-family: Anton, sans-serif;
	font-size: clamp(22px, 2.6vw, 31px);
	line-height: 1.16;
	letter-spacing: -.01em;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   6. Credits photo strip
   -------------------------------------------------------------------------- */

.credit-photos {
	margin-top: 60px;
}

.credit-photos__label {
	margin: 0 0 18px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .2em;
	color: #4a4a4a;
}

.credit-photos__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.credit-photos__grid figure {
	margin: 0;
	overflow: hidden;
	background: #999;
	aspect-ratio: 4/5;
	position: relative;
}

.credit-photos__grid img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s var(--cw-ease), filter .4s ease;
	filter: grayscale(1) contrast(1.04);
}

.credit-photos__grid figure:hover img {
	transform: scale(1.06);
	filter: grayscale(0) contrast(1);
}

.credit-photos__grid figcaption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 14px 14px 12px;
	background: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, 0));
	color: #fff;
	font-size: 11px;
	letter-spacing: .06em;
}

.credit-photos__empty {
	margin-top: 46px;
	padding: 16px 18px;
	border: 1px dashed rgba(17, 17, 17, .4);
	font-size: 13px;
	color: #333;
}

/* --------------------------------------------------------------------------
   7. Booking + contact, merged
   -------------------------------------------------------------------------- */

.booking-contact {
	position: relative;
	background: var(--cw-tan);
	padding: 120px max(28px, calc((100vw - 1144px) / 2));
}

.cw-anchor-alias {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
}

.booking-contact__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px;
	margin-top: 30px;
	align-items: start;
}

.booking-contact h2 {
	font-size: clamp(64px, 8vw, 118px);
	margin: 22px 0 26px;
}

.booking-kinds {
	margin: 0 0 26px;
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: #5c5646;
}

.booking-contact .big {
	max-width: 440px;
	margin: 0 0 34px;
}

.booking-contact .contact-card {
	padding-top: 0;
}

.booking-contact__socials {
	margin-top: 44px;
}

.booking-contact__socials-label {
	margin: 0 0 14px;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .15em;
	color: #777;
}

/* --------------------------------------------------------------------------
   8. Enquiry form
   -------------------------------------------------------------------------- */

.booking-form {
	background: var(--cw-cream);
	padding: 38px 34px 34px;
	border: 1px solid rgba(17, 17, 17, .12);
}

.booking-form h3 {
	margin: 0 0 10px;
	font-family: Anton, sans-serif;
	font-weight: 400;
	font-size: 26px;
	letter-spacing: -.01em;
	text-transform: uppercase;
}

.booking-form__note {
	margin: 0 0 26px;
	font-size: 14px;
	line-height: 1.6;
	color: #5d5749;
}

.cw-form__field {
	margin: 0 0 20px;
}

.cw-form__field label {
	display: block;
	margin-bottom: 7px;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: #4a4436;
}

.cw-form__field .req {
	color: #9a3412;
}

.cw-form__field input,
.cw-form__field textarea {
	width: 100%;
	padding: 13px 14px;
	border: 1px solid rgba(17, 17, 17, .26);
	border-radius: 0;
	background: #fff;
	color: var(--cw-ink);
	font-family: inherit;
	font-size: 15px;
	line-height: 1.5;
	transition: border-color .25s ease, box-shadow .25s ease;
}

.cw-form__field textarea {
	resize: vertical;
	min-height: 130px;
}

.cw-form__field input:focus,
.cw-form__field textarea:focus {
	outline: 0;
	border-color: #111;
	box-shadow: 0 0 0 3px rgba(17, 17, 17, .12);
}

.cw-form__field input[aria-invalid="true"],
.cw-form__field textarea[aria-invalid="true"] {
	border-color: #9a3412;
	background: #fff8f5;
}

.cw-form__error {
	display: block;
	margin-top: 7px;
	font-size: 12.5px;
	color: #9a3412;
}

/* The honeypot must stay in the layout for bots but never be seen or
   focusable by people, so it is moved off-screen rather than display:none. */
.cw-form__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.cw-form__actions {
	margin: 26px 0 0;
}

.cw-form__actions .btn {
	padding: 16px 30px;
	width: 100%;
}

.form-notice {
	margin: 0 0 22px;
	padding: 15px 17px;
	font-size: 14px;
	line-height: 1.55;
	border-left: 3px solid;
}

.form-notice--success {
	border-color: #2f6f4f;
	background: #eef6f1;
	color: #1f4e37;
}

.form-notice--error {
	border-color: #9a3412;
	background: #fdf1ec;
	color: #7c2d12;
}

/* --------------------------------------------------------------------------
   9. Footer layout with the social row
   -------------------------------------------------------------------------- */

footer {
	grid-template-columns: auto 1fr auto;
	align-items: center;
	row-gap: 26px;
}

.footer-social {
	grid-column: 1 / -1;
	order: 3;
	padding-top: 22px;
	border-top: 1px solid rgba(255, 255, 255, .13);
}

footer small {
	order: 2;
}

/* --------------------------------------------------------------------------
   10. Focus visibility
   -------------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
.video-thumb:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.videos a:focus-visible,
.hero a:focus-visible,
footer a:focus-visible {
	outline-color: #fff;
}

/* --------------------------------------------------------------------------
   11. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 980px) {
	.booking-contact__grid {
		gap: 48px;
	}

	.bio-grid {
		gap: 50px;
	}
}

@media (max-width: 800px) {
	.bio-grid,
	.booking-contact__grid {
		grid-template-columns: 1fr;
		gap: 26px;
	}

	.bio-photo {
		margin-top: 22px;
		max-width: 420px;
	}

	.booking-contact {
		padding: 80px 20px;
	}

	.booking-form {
		padding: 28px 22px 26px;
	}

	.credit-photos__grid {
		grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
		gap: 12px;
	}

	.cw-social {
		padding: 10px 14px;
	}

	footer {
		grid-template-columns: 1fr;
	}

	.footer-social {
		order: 3;
		padding-top: 18px;
	}
}

/* --------------------------------------------------------------------------
   12. Reduced motion
   Movement is removed; the colour and state changes stay, so nothing loses
   its hover or focus feedback.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.link-anim::after,
	.nav a::after,
	.arrow-link::after,
	.contact-card > a::after,
	.arrow-link__arrow,
	.btn,
	.btn::before,
	.cw-social,
	.cw-social .cw-icon,
	.video-thumb img,
	.video-play,
	.bio-photo img,
	.credit-photos__grid img {
		transition-duration: .01ms !important;
	}

	.btn:hover,
	.btn:focus-visible,
	.cw-social:hover,
	.cw-social:focus-visible,
	.video-card:hover .video-play,
	.video-card:hover .video-thumb img,
	.bio-photo:hover img,
	.credit-photos__grid figure:hover img {
		transform: none !important;
	}
}


/* --------------------------------------------------------------------------
   13. Events: icons, status tags, descriptions
   -------------------------------------------------------------------------- */

.show {
	grid-template-columns: 120px 1fr auto;
	gap: 0 24px;
	align-items: center;
}

.show--with-icon {
	grid-template-columns: 120px 84px 1fr auto;
}

.show-icon {
	width: 84px;
	height: 84px;
	overflow: hidden;
	background: #e2ddd2;
	border: 1px solid #cfc8ba;
}

.show-icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s var(--cw-ease);
}

.show:hover .show-icon img {
	transform: scale(1.07);
}

.show-desc {
	margin: 9px 0 0;
	max-width: 560px;
	font-size: 14.5px;
	line-height: 1.6;
	color: #5a5547;
}

.ticket-link {
	display: inline-block;
	margin-top: 11px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .13em;
}

.show-tags {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
}

.show-tags .private {
	margin-top: 0;
	white-space: nowrap;
}

.status-soldout {
	border-color: #946200;
	color: #946200;
}

.status-free {
	border-color: #2f6f4f;
	color: #2f6f4f;
}

.status-cancelled {
	border-color: #b32d2e;
	color: #b32d2e;
}

.show--cancelled .event {
	text-decoration: line-through;
	text-decoration-thickness: 2px;
	color: #8a8578;
}

@media (max-width: 800px) {
	.show,
	.show--with-icon {
		grid-template-columns: 75px 1fr;
		gap: 10px;
		align-items: start;
	}

	.show--with-icon .show-icon {
		grid-row: 1;
		grid-column: 2;
		width: 64px;
		height: 64px;
		margin-bottom: 6px;
	}

	.show--with-icon .show-body {
		grid-column: 2;
	}

	.show-tags {
		grid-column: 2;
		align-items: flex-start;
		flex-direction: row;
		flex-wrap: wrap;
		margin-top: 10px;
	}
}

/* ==========================================================================
   v1.3 — accent colour, looser display headings, compact social row,
   next-appearance card, award strip, credits grid, form polish.
   ========================================================================== */

:root {
	/* Three weights of the same orange, chosen for contrast rather than looks
	   alone: --cw-accent for fills and large marks, --cw-accent-strong behind
	   white button text (5.3:1), --cw-accent-ink for small text on cream
	   (5.7:1). Using the lightest one for small text would fail AA. */
	--cw-accent: #d1541f;
	--cw-accent-strong: #b8460f;
	--cw-accent-ink: #a33f14;
	--cw-accent-soft: rgba(209, 84, 31, .1);
	--cw-accent-line: rgba(209, 84, 31, .32);
}

/* --------------------------------------------------------------------------
   4. Looser stacked headings
   The poster look came from line-height .84, which jammed the lines together.
   .95 keeps the stacked-slab feel and gives the descenders room.
   -------------------------------------------------------------------------- */

.hero h1,
h2 {
	line-height: .95;
}

.hero h1 {
	line-height: .9;
}

.section h2,
.credits h2,
.booking h2,
.booking-contact h2 {
	margin-bottom: 30px;
}

/* --------------------------------------------------------------------------
   2. Accent: section numbers, focus rings, small details
   -------------------------------------------------------------------------- */

.label {
	color: var(--cw-accent-ink);
}

.videos .label,
.hero .kicker {
	color: var(--cw-accent);
}

.btn.accent {
	background: var(--cw-accent-strong);
	color: #fff;
	border-color: var(--cw-accent-strong);
}

.btn.accent::before {
	background: #111;
}

.btn.accent:hover,
.btn.accent:focus-visible {
	color: #fff;
	border-color: #111;
}

a:focus-visible,
button:focus-visible,
.video-thumb:focus-visible,
input:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--cw-accent);
	outline-offset: 3px;
}

.videos a:focus-visible,
.hero a:focus-visible,
footer a:focus-visible {
	outline-color: var(--cw-accent);
}

/* --------------------------------------------------------------------------
   7. Compact social icon row
   Icon-only, so the row never wraps and never competes with the real buttons.
   The label stays in the DOM for screen readers.
   -------------------------------------------------------------------------- */

.cw-socials--icon,
.cw-socials--icon-dark {
	gap: 8px;
	flex-wrap: nowrap;
}

.cw-socials--icon .cw-social,
.cw-socials--icon-dark .cw-social {
	width: 40px;
	height: 40px;
	padding: 0;
	justify-content: center;
	border-radius: 50%;
}

.cw-socials--icon .cw-social__label,
.cw-socials--icon-dark .cw-social__label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* On the dark hero and footer. */
.cw-socials--icon .cw-social {
	color: #cfcabd;
	border-color: rgba(255, 255, 255, .26);
	background: transparent;
}

.cw-socials--icon .cw-social:hover,
.cw-socials--icon .cw-social:focus-visible {
	color: #111;
	background: var(--cw-accent);
	border-color: var(--cw-accent);
	box-shadow: 0 8px 18px rgba(209, 84, 31, .3);
}

/* On the light booking panel. */
.cw-socials--icon-dark .cw-social {
	color: #4a4436;
	border-color: rgba(17, 17, 17, .22);
	background: transparent;
}

.cw-socials--icon-dark .cw-social:hover,
.cw-socials--icon-dark .cw-social:focus-visible {
	color: #fff;
	background: var(--cw-accent-strong);
	border-color: var(--cw-accent-strong);
	box-shadow: 0 8px 18px rgba(184, 70, 15, .3);
}

.hero-social {
	margin-top: 30px;
}

.footer-social .cw-social {
	width: 36px;
	height: 36px;
}

/* --------------------------------------------------------------------------
   6. Award strip: cream with fine dividers and accent marks
   -------------------------------------------------------------------------- */

.stats {
	background: var(--cw-cream);
	color: var(--cw-ink);
	border-top: 1px solid #ded7c9;
	border-bottom: 1px solid #ded7c9;
	max-width: none;
	padding: 0 max(28px, calc((100vw - 1144px) / 2));
}

.stats .stat {
	padding: 46px 38px 44px;
	border-right: 1px solid #ded7c9;
	border-bottom: 0;
	text-align: left;
}

.stats .stat:first-child {
	padding-left: 0;
}

.stats .stat:last-child {
	border-right: 0;
}

.stat-mark {
	display: block;
	margin-bottom: 16px;
	color: var(--cw-accent);
	line-height: 0;
}

.stats strong {
	display: block;
	font: 400 46px/1 Anton, sans-serif;
	letter-spacing: -.01em;
}

.stats .stat-label {
	display: block;
	margin-top: 8px;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: #6a6455;
}

/* --------------------------------------------------------------------------
   8. Next appearance card
   -------------------------------------------------------------------------- */

.next-show {
	margin-top: 40px;
	background: #fff;
	border: 1px solid #e0d9cb;
	border-left: 4px solid var(--cw-accent);
	padding: 0;
	overflow: hidden;
}

.next-show__kicker {
	margin: 0;
	padding: 13px 26px;
	background: var(--cw-accent-soft);
	border-bottom: 1px solid #ece4d6;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--cw-accent-ink);
}

.next-show__body {
	display: grid;
	grid-template-columns: 150px 1fr;
	gap: 30px;
	padding: 32px 26px 30px;
	align-items: start;
}

.next-show__date {
	text-align: center;
	padding: 18px 10px 16px;
	background: #111;
	color: #fff;
}

.next-show__month {
	display: block;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .22em;
	color: var(--cw-accent);
}

.next-show__day {
	display: block;
	font: 400 76px/.9 Anton, sans-serif;
	margin: 4px 0 2px;
}

.next-show__year {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .18em;
	color: #9b958a;
}

.next-show__icon {
	float: right;
	width: 76px;
	height: 76px;
	margin: 0 0 14px 18px;
	overflow: hidden;
	border: 1px solid #e0d9cb;
}

.next-show__icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.next-show__detail h3 {
	margin: 0 0 8px;
	font-family: Anton, sans-serif;
	font-weight: 400;
	font-size: clamp(26px, 3.4vw, 40px);
	line-height: 1.02;
	letter-spacing: -.015em;
	text-transform: uppercase;
}

.next-show__meta {
	margin: 0;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .13em;
	color: #6a6455;
}

.next-show__desc {
	margin: 14px 0 0;
	max-width: 520px;
	font-size: 15px;
	line-height: 1.6;
	color: #55503f;
}

.next-show__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 22px;
	clear: both;
}

.next-show__actions .private {
	margin-top: 0;
}

.next-show--cancelled {
	border-left-color: #b32d2e;
}

.next-show--cancelled .next-show__detail h3 {
	text-decoration: line-through;
	color: #8a8578;
}

.shows-more-label {
	margin: 46px 0 0;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: #8a8578;
}

/* Accent the dates in the compact list too. */
.show .date b {
	color: var(--cw-accent-ink);
}

/* --------------------------------------------------------------------------
   9. Credits: a real grid, one name per row
   -------------------------------------------------------------------------- */

.names {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0 50px;
	margin: 42px 0 0;
	padding: 0;
	list-style: none;
}

.names li {
	display: flex;
	align-items: baseline;
	gap: 16px;
	padding: 17px 0;
	border-bottom: 1px solid rgba(17, 17, 17, .16);
}

.names__num {
	flex: none;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .1em;
	color: var(--cw-accent-ink);
}

.names__name {
	font: 400 clamp(24px, 3.1vw, 40px)/1.05 Anton, sans-serif;
	letter-spacing: -.01em;
}

/* --------------------------------------------------------------------------
   1. Clip cards: distinct treatments so a run of them never looks repeated
   -------------------------------------------------------------------------- */

.video-thumb__fallback {
	flex-direction: column;
	gap: 10px;
	padding-bottom: 0;
	font-size: 0;
}

.video-thumb__num {
	font: 400 40px/1 Anton, sans-serif;
	letter-spacing: .04em;
	color: rgba(255, 255, 255, .92);
}

.video-thumb__mark {
	font-size: 15px;
	font-weight: 800;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .5);
}

.video-card--v1 .video-thumb__fallback {
	background:
		radial-gradient(circle at 30% 30%, rgba(209, 84, 31, .34), transparent 64%),
		#1c1c1c;
}

.video-card--v2 .video-thumb__fallback {
	background:
		linear-gradient(145deg, rgba(209, 84, 31, .28), transparent 58%),
		#212121;
}

.video-card--v3 .video-thumb__fallback {
	background:
		radial-gradient(circle at 72% 62%, rgba(209, 84, 31, .3), transparent 60%),
		#181818;
}

.video-card--v4 .video-thumb__fallback {
	background:
		linear-gradient(28deg, rgba(209, 84, 31, .24), transparent 62%),
		#242424;
}

.video-card--v1 .video-thumb__num { color: rgba(255, 255, 255, .95); }
.video-card--v2 .video-thumb__num { color: rgba(255, 255, 255, .8); }
.video-card--v3 .video-thumb__num { color: rgba(255, 255, 255, .88); }
.video-card--v4 .video-thumb__num { color: rgba(255, 255, 255, .74); }

.video-card--link:hover .video-thumb__fallback {
	filter: brightness(1.18);
}

/* --------------------------------------------------------------------------
   5. Biography: quote block filling the space under the heading
   -------------------------------------------------------------------------- */

.bio-quote {
	margin: 38px 0 0;
	padding: 26px 26px 24px;
	background: var(--cw-accent-soft);
	border-left: 3px solid var(--cw-accent);
	max-width: 430px;
}

.bio-quote blockquote {
	margin: 0;
	font-family: Anton, sans-serif;
	font-weight: 400;
	font-size: clamp(22px, 2.5vw, 30px);
	line-height: 1.14;
	letter-spacing: -.005em;
	text-transform: uppercase;
	color: #3d2a20;
}

.bio-pullquote {
	border-left-color: var(--cw-accent);
	color: #3d2a20;
}

/* --------------------------------------------------------------------------
   10. Booking form polish
   -------------------------------------------------------------------------- */

.booking-form {
	background: #fffdf8;
	border: 1px solid #e3dbcc;
	padding: 34px 32px 32px;
}

.booking-form h3 {
	font-size: 23px;
	letter-spacing: 0;
}

.cw-form__field {
	margin: 0 0 18px;
}

.cw-form__field label {
	margin-bottom: 8px;
	font-size: 11px;
	letter-spacing: .11em;
	color: #56503f;
}

.cw-form__field .req {
	color: var(--cw-accent-ink);
	margin-left: 2px;
}

.cw-form__field input,
.cw-form__field textarea {
	padding: 14px 15px;
	background: #f7f3ea;
	border: 1px solid #ded5c3;
	font-size: 15px;
}

.cw-form__field input::placeholder,
.cw-form__field textarea::placeholder {
	color: #a49c8a;
}

.cw-form__field input:hover,
.cw-form__field textarea:hover {
	border-color: #c9bfa9;
}

.cw-form__field input:focus,
.cw-form__field textarea:focus {
	background: #fff;
	border-color: var(--cw-accent);
	box-shadow: 0 0 0 3px var(--cw-accent-soft);
}

.cw-form__field input[aria-invalid="true"],
.cw-form__field textarea[aria-invalid="true"] {
	border-color: #b32d2e;
	background: #fdf4f2;
}

.cw-form__error {
	color: #a32322;
}

.cw-form__actions {
	margin-top: 24px;
}

.form-notice--success {
	border-color: #2f6f4f;
}

.booking-contact__socials-label {
	color: #6a6455;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
	.next-show__body {
		grid-template-columns: 116px 1fr;
		gap: 22px;
	}

	.next-show__day {
		font-size: 58px;
	}
}

@media (max-width: 800px) {
	.stats {
		padding: 0 20px;
	}

	.stats .stat {
		padding: 34px 0 32px;
		border-right: 0;
		border-bottom: 1px solid #ded7c9;
	}

	.stats .stat:last-child {
		border-bottom: 0;
	}

	.next-show__body {
		grid-template-columns: 1fr;
		gap: 20px;
		padding: 24px 20px 26px;
	}

	.next-show__date {
		display: flex;
		align-items: baseline;
		justify-content: flex-start;
		gap: 12px;
		padding: 14px 16px;
	}

	.next-show__day {
		font-size: 44px;
		margin: 0;
	}

	.names {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.bio-quote {
		max-width: 100%;
		margin-top: 26px;
	}

	.cw-socials--icon,
	.cw-socials--icon-dark {
		flex-wrap: wrap;
	}
}

@media (prefers-reduced-motion: reduce) {
	.video-card--link:hover .video-thumb__fallback {
		filter: none;
	}
}


/* --------------------------------------------------------------------------
   14. Contrast corrections
   Measured against the rendered page rather than assumed. Mid-tone orange
   works on very light or very dark grounds, but not on the mid-grey credits
   panel, so that section uses a dark warm ink instead.
   -------------------------------------------------------------------------- */

:root {
	/* A lighter orange for dark grounds: the mid orange only reaches 4.49:1
	   on near-black, just under the 4.5 needed for small text. */
	--cw-accent-light: #e46a33;
}

.videos .label,
.hero .kicker {
	color: var(--cw-accent-light);
}

/* Credits sits on mid-grey, where the orange cannot reach 4.5:1 at any
   weight that still reads as orange. */
.credits .label,
.names .names__num {
	color: #2b1c14;
}

/* The older `.names span` rule outranks the newer single-class ones, so the
   name and number styles are restated at a higher specificity. */
.names li span {
	border-bottom: 0;
}

.names .names__num {
	font: 800 12px/1.4 Inter, Arial, sans-serif;
	letter-spacing: .12em;
	opacity: .62;
}

.names .names__name {
	font: 400 clamp(24px, 3.1vw, 40px)/1.05 Anton, sans-serif;
	letter-spacing: -.01em;
}

/* --------------------------------------------------------------------------
   15. Credits lifted off the flat grey
   Cream, matching the award strip, with the accent doing the distinguishing
   work instead of a background colour. On cream the orange clears AA, so the
   dark-ink fallback from section 14 is no longer needed here.
   -------------------------------------------------------------------------- */

.credits {
	background: var(--cw-cream);
	border-top: 1px solid #e0d9cb;
	border-bottom: 1px solid #e0d9cb;
}

.credits .label,
.names .names__num {
	color: var(--cw-accent-ink);
}

.names .names__num {
	opacity: 1;
}

.names li {
	border-bottom: 1px solid var(--cw-accent-line);
}

.credit-extra {
	color: #4a4436;
}

.credit-photos__label {
	color: var(--cw-accent-ink);
}

.credit-photos__empty {
	border-color: var(--cw-accent-line);
	background: var(--cw-accent-soft);
	color: #4a4436;
}

.credit-photos__grid figure {
	background: #e2ddd2;
}