/* Artemis Theatre Company static site — original artwork + accessible responsive enhancements. */
* { box-sizing: border-box; }
html {scroll-behavior:smooth;}
body {min-width:0!important; background:#d1d1d1 url('images/page.png') repeat; font-family:Roboto,Arial,Helvetica,sans-serif; font-size:16px; line-height:1.55;}
.art-sheet {width:min(948px, calc(100% - 24px)); min-height:75vh; background:#fff url('images/sheet.png') top center repeat-y;}
.art-header {position:relative; height:200px; background-image:url('images/object756525044.png'),url('images/header.png')!important; background-size:949px 172px, 946px 200px!important; background-repeat:no-repeat!important; background-position:0 28px,0 0!important;}
.brand-link {display:block; position:absolute; inset:0; z-index:1; color:inherit;text-decoration:none;}
.brand-subtitle {position:absolute;top:126px;left:129px;font:100 28px/35px Roboto,Arial,Helvetica,sans-serif;letter-spacing:-1px;white-space:nowrap;color:#111;}
.art-nav {padding:0 25px 0 25px; min-height:36px;}
.art-nav .art-hmenu {float:right;}
.art-hmenu > li > a.active {border-bottom:2px solid #f4c134;}
.art-layout-wrapper {min-height:170px;}
.art-post {margin:22px 20px 8px;padding:10px;}
.art-postcontent p {margin:12px 0 16px 45px;}
.art-postcontent p, .art-postcontent li, .art-postcontent table, .art-postcontent td {line-height:1.55;}
.art-postcontent a {overflow-wrap:anywhere;}
.art-postcontent img {max-width:100%;height:auto;}
.art-postcontent h4 {text-transform:none;}
.art-postcontent .photoright {float:right; margin:0 0 18px 22px; width:116px; height:auto;}
.art-postcontent .wp-caption {max-width:100%;}
.art-footer {padding:30px 16px;}
.art-postcontent ul.venue-grid {list-style:none; margin:8px 0 10px 45px; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2px 22px;}
.art-postcontent ul.venue-grid li {padding:0 0 3px 13px; position:relative; margin:0; list-style:none; overflow:visible;}
.art-postcontent ul.venue-grid li::before {content:'';position:absolute;display:block;left:0;top:12px;bottom:auto;transform:translateY(-50%);width:5px;height:5px;border-radius:50%;background:#bd3e1b;margin:0;font-size:0;line-height:0;}
.photo-gallery {display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:20px 0 28px 45px;}
.photo-gallery a {display:block;overflow:hidden;aspect-ratio: 1.25; background:#e7e7e7; outline-offset:3px;}
.photo-gallery img {width:100%;height:100%;object-fit:cover;object-position:center;display:block;transition:transform .25s ease;}
.photo-gallery a:hover img {transform:scale(1.045);}
.photo-gallery a:focus-visible {outline:3px solid #bd3e1b;}
.lightbox {inset:0;border:0;border-radius:5px;background:#191919;color:#fff;max-width:min(1040px,96vw);max-height:95vh;width:min(980px,96vw);padding:34px 60px;box-shadow:0 20px 90px #0009;overflow:visible;}
.lightbox::backdrop {background:rgba(0,0,0,.83);}
.lightbox figure {margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;max-height:calc(95vh - 90px);}
.lightbox figure img {max-width:100%; max-height:calc(95vh - 135px); object-fit:contain; width:auto;height:auto;}
.lightbox figcaption {text-align:center;color:#e5e5e5;font-size:13px;margin-top:12px;}
.lightbox button {appearance:none;background:#fff2;border:1px solid #fff4;color:white;border-radius:100%;font-size:30px;cursor:pointer;width:40px;height:40px;display:grid;place-items:center;line-height:1;position:absolute;}
.lightbox button:hover {background:#fff4;}
.lightbox-close {right:8px;top:8px;}.lightbox-prev {left:9px;top:48%;}.lightbox-next {right:9px;top:48%;}
.productions-list {margin:5px 0 8px 45px;}
.production-item {display:grid;grid-template-columns:90px minmax(0,1fr);gap:22px;padding:22px 0 24px;border-bottom:1px solid #e8e5e0;}
.production-item:first-child {padding-top:0;}
.production-item:last-child {border-bottom:0;}
.production-year {color:#be3e1c;font-size:17px;font-weight:500;}
.production-body {min-width:0;line-height:1.58;}
.production-body p {margin:0 0 12px;}
.production-body strong {font-weight:700;}
.production-body > table {width:100%!important;}
.production-body td {vertical-align:top;}
.production-body .wp-caption {margin:0 0 12px 12px; max-width:100%;}
.production-body .wp-caption img {max-width:100%;height:auto;}
.production-body :is(p,table) {max-width:100%;}
.contact-panel {margin-left:45px; max-width:670px;}
.art-postcontent .contact-panel p {margin:0 0 20px;}
.contact-form {display:flex;flex-direction:column;gap:7px;max-width:540px;}
.contact-form label {font-size:14px;font-weight:600;margin-top:10px;}
.contact-form input, .contact-form textarea {border:1px solid #bbb;border-radius:3px;background:#fff;padding:11px 12px;font:inherit;width:100%;max-width:100%;color:#111;}
.contact-form input:focus-visible, .contact-form textarea:focus-visible {outline:2px solid #bd3e1b;outline-offset:2px;}
.contact-form button {align-self:flex-start;margin:14px 0 5px;padding:11px 22px;background:#bc3e1b;color:white;border:0;border-radius:3px;cursor:pointer;font:500 16px Roboto,Arial,sans-serif;}
.contact-form button:hover {background:#912d12;}
.art-postcontent .contact-form .form-note {font-size:13px;color:#575757;margin:0 0 12px;}
.menu-toggle {display:none;background:transparent;border:1px solid #d5d5d5;color:#bd3e1b;border-radius:3px;padding:8px 13px;cursor:pointer;font:500 17px Roboto,Arial,sans-serif;}
.skip-link {position:absolute;top:-100px;left:14px;z-index:9999;padding:8px 12px;background:#fff;color:#a52d0b;}
.skip-link:focus {top:8px;}
.visually-hidden {position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
@media (max-width: 980px) {
 .art-sheet {width:calc(100% - 20px);}
 .art-header {height:clamp(122px,21vw,200px);background-size:100% auto,100% 100%!important;background-position:0 clamp(12px,2.9vw,28px),0 0!important;}
 .brand-subtitle {top:64%;left:13.7%;font-size:clamp(14px,2.95vw,28px);line-height:1.2;}
 .art-nav {padding:0 16px;}
 ul.art-hmenu > li {margin-left:clamp(10px,2vw,24px);}
 ul.art-hmenu > li > a {font-size:clamp(13px,2vw,20px);}
 ul.art-hmenu > li::before {left:-20px;width:20px;}
 .art-postcontent p {margin-left:22px;}
 .art-postheader,.art-postcontent h4 {margin-left:22px;}
 .photo-gallery,.productions-list,.contact-panel,.art-postcontent ul.venue-grid {margin-left:22px;}
}
@media (max-width:740px) {
 .art-sheet {width:100%;border:0;box-shadow:none;}
 .art-header {height:clamp(90px,21vw,155px);}
 .brand-subtitle {top:65%;}
 .art-nav {padding:0 18px 10px;display:flex;flex-direction:column;align-items:stretch;min-height:42px;}
 .menu-toggle {display:block;align-self:flex-end;}
 .art-nav .art-hmenu {display:none;float:none;width:100%;padding:10px 0 0;}
 .art-nav .art-hmenu.is-open {display:flex;flex-direction:column;}
 ul.art-hmenu > li, ul.art-hmenu > li:first-child, ul.art-hmenu > li:last-child {margin:0;width:100%;float:none;}
 ul.art-hmenu > li::before {display:none;}
 ul.art-hmenu > li > a {display:block;text-align:left;height:auto;line-height:1.25;padding:10px 14px;border-bottom:1px solid #eee;font-size:17px;}
 ul.art-hmenu > li > a.active {border-left:3px solid #f4c134;border-bottom:1px solid #eee;background:#f8f5ef;}
 .art-post {margin:5px 12px 10px;padding:10px 8px;}
 .art-postheader {font-size:36px;margin:0 0 12px 8px;}
 .art-postcontent h4 {margin:12px 0 10px 8px;font-size:23px;}
 .art-postcontent p,.art-postcontent .contact-panel p {margin:0 0 16px 8px;}
 .art-postcontent .contact-panel p {margin-left:0;}
 .art-postcontent img.photoright {margin-left:14px;}
 .photo-gallery,.productions-list,.contact-panel,.art-postcontent ul.venue-grid {margin-left:8px;}
 .photo-gallery {grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;}
 .art-postcontent ul.venue-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
 .production-item {grid-template-columns:1fr;gap:5px;padding:17px 0;}
 .production-year {font-size:16px;}
 .production-body table,.production-body tbody,.production-body tr,.production-body td {display:block!important;width:100%!important;}
 .production-body .wp-caption {float:none;margin:12px 0;}
 .lightbox {padding:36px 48px;}
}
@media (max-width:460px) {
 .photo-gallery,.art-postcontent ul.venue-grid {grid-template-columns:1fr 1fr;gap:7px;}
 .art-postcontent .photoright {width:96px;}
 .art-postheader {font-size:32px;}
 .lightbox {padding:50px 14px 55px;}
 .lightbox-prev {top:auto;bottom:9px;left:35%;}
 .lightbox-next {top:auto;bottom:9px;right:35%;}
}
@media (prefers-reduced-motion:reduce) {html {scroll-behavior:auto;} .photo-gallery img {transition:none;}}
