/*
Theme Name: Andrew Stuckey — Editable Text
Theme URI: https://www.wastuckey.com/
Author: Andrew Stuckey
Description: A restrained portfolio theme for baritone and teacher Andrew Stuckey.
Version: 2.0.0
Text Domain: wastuckey
*/

:root {
  --ink: #13263a;
  --muted: #66727f;
  --paper: #f7f4ee;
  --white: #fff;
  --sand: #e8dece;
  --blue: #0c234b;
  --red: #ab0520;
  --gold: #d59b2a;
  --line: rgba(19, 38, 58, .14);
  --max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.65 Georgia, 'Times New Roman', serif; }
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }
.site-shell { width: min(calc(100% - 40px), var(--max)); margin-inline: auto; }

.topbar { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.site-title { font: 700 24px/1.1 Arial, sans-serif; text-decoration: none; letter-spacing: -.02em; }
.nav { display: flex; gap: 22px; flex-wrap: wrap; }
.nav a { font: 600 13px/1 Arial, sans-serif; text-decoration: none; text-transform: uppercase; letter-spacing: .08em; }
.nav a:hover, .nav .current-menu-item > a { color: var(--red); }

.hero { min-height: 620px; display: grid; grid-template-columns: 1.05fr .95fr; align-items: stretch; background: var(--white); }
.hero-photo { min-height: 560px; background: linear-gradient(145deg,#1b3147,#6f879b); position: relative; overflow: hidden; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; }
.hero-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(50px,8vw,110px); }
.kicker { margin: 0 0 14px; color: var(--red); font: 700 12px/1.25 Arial, sans-serif; text-transform: uppercase; letter-spacing: .16em; }
h1,h2,h3 { font-family: Arial, sans-serif; line-height: 1.04; letter-spacing: -.035em; }
h1 { font-size: clamp(54px,7vw,92px); margin: 0 0 24px; }
h2 { font-size: clamp(36px,4.8vw,60px); margin: 0 0 24px; }
h3 { font-size: 27px; margin: 18px 0 8px; }
.hero-line { margin: 0 0 20px; font-size: clamp(24px,2.7vw,36px); font-style: italic; line-height: 1.25; }
.lead { font-size: 20px; max-width: 650px; }
.button-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.button { display: inline-flex; align-items: center; justify-content: center; padding: 14px 20px; border: 1px solid var(--ink); border-radius: 999px; font: 700 13px/1 Arial,sans-serif; text-decoration: none; letter-spacing: .04em; }
.button.primary { background: var(--ink); color: white; }
.button.red { background: var(--red); border-color: var(--red); color: white; }
.button.light { background: white; border-color: white; color: var(--ink); margin-top: 12px; }
.button:hover { transform: translateY(-1px); }
.text-link { font: 700 13px/1.4 Arial,sans-serif; text-decoration: none; border-bottom: 1px solid currentColor; }

.two-col { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(40px,7vw,90px); align-items: center; padding: 72px 0; }
.art-block { height: 460px; background: #d9d9d9; overflow:hidden; }
.art-block img { width: 100%; height: 100%; object-fit: cover; }
.pull { padding-left: 24px; border-left: 4px solid var(--red); font-size: 27px; font-style: italic; }
.feature-strip { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; padding: 0 0 70px; }
.feature-strip article { background: var(--white); padding: 18px; }
.feature-strip img { aspect-ratio: 4/3; object-fit: cover; background:#ccd3d9; }
.feature-strip article > img { width:calc(100% + 36px); max-width:calc(100% + 36px); margin:-18px -18px 22px; }
.wide-callout { padding: 72px clamp(28px,7vw,90px); margin-bottom: 70px; background: var(--ink); color: white; }
.wide-callout p { max-width: 780px; }
.home-split { display:grid; grid-template-columns: .9fr 1.1fr; gap: clamp(40px,7vw,90px); padding: 64px 0; border-top: 1px solid var(--line); }
.home-split p { margin-top:0; }
.media-preview { padding: 68px 0 76px; }
.media-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin:36px 0; }
.media-card { background:white; padding:24px; text-decoration:none; border-left:4px solid var(--red); }
.media-card strong,.media-card span { display:block; }
.media-card strong { font:700 20px/1.25 Arial,sans-serif; margin-bottom:5px; }
.contact-callout,.contact-page { padding: 70px 0 86px; }
.contact-callout { border-top:1px solid var(--line); }
.contact-form { max-width:760px; margin-top:38px; }
.contact-form label { display:block; margin:0 0 20px; color:var(--ink); font:700 13px/1.4 Arial,sans-serif; letter-spacing:.03em; }
.contact-form input,.contact-form select,.contact-form textarea { width:100%; margin-top:8px; padding:14px 15px; border:1px solid rgba(19,38,58,.28); border-radius:4px; background:var(--white); color:var(--ink); font:17px/1.4 Georgia,'Times New Roman',serif; }
.contact-form textarea { resize:vertical; min-height:170px; }
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus { outline:3px solid rgba(171,5,32,.15); border-color:var(--red); }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.form-honeypot { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.form-notice { max-width:760px; margin:28px 0 0; padding:15px 18px; border-left:4px solid var(--ink); background:var(--white); }
.form-notice.success { border-color:#30714b; }
.form-notice.error { border-color:var(--red); }

.page-hero { padding: 90px 0 55px; max-width: 860px; }
.page-content { padding-bottom: 100px; max-width: 820px; }
.page-content > *:first-child { margin-top: 0; }
.page-section { max-width:860px; padding: 0 0 70px; }
.detail-split { display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(40px,7vw,90px); padding-bottom:100px; }
.photo-placeholder { min-height:430px; background:linear-gradient(145deg,#1b3147,#6f879b); }
.photo-placeholder img { width:100%; height:100%; object-fit:cover; }
.video-section { padding: 0 0 90px; }
.video-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:44px 24px; }
.video-grid article { min-width:0; }
.video-frame { aspect-ratio:16/9; background:#071a2c; }
.video-frame iframe { display:block; width:100%; height:100%; border:0; }
.video-grid h3 { margin-bottom:6px; }
.video-grid p { margin-top:0; color:var(--muted); }
.international-cards { padding-top:0; }
.stage-gallery { display:grid; grid-template-columns:1.6fr .7fr .7fr; gap:14px; padding:0 0 90px; }
.stage-gallery figure,.photo-grid figure { margin:0; background:var(--white); overflow:hidden; }
.stage-gallery img { width:100%; height:360px; object-fit:cover; }
.stage-gallery-wide img { object-position:center 30%; }
.photo-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; padding:0 0 100px; }
.photo-grid img { width:100%; height:430px; object-fit:cover; }
.photo-grid figcaption { padding:13px 16px 16px; color:var(--muted); font:600 12px/1.4 Arial,sans-serif; text-transform:uppercase; letter-spacing:.08em; }
.teaching-gallery figure:first-child img { object-position:center 30%; }
.international-feature { display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,80px); align-items:center; padding:0 0 90px; }
.international-feature img { width:100%; max-height:660px; object-fit:cover; }
.international-gallery img { height:500px; }
.international-gallery figure:nth-child(2) img { object-position:center 62%; }

/* Wildcat Vocal Competition */
.wildcat { background: var(--blue); color: white; margin-top: 34px; position: relative; overflow: hidden; }
.wildcat::before { content: ''; position:absolute; inset:0 auto 0 0; width: 10px; background: var(--red); }
.wildcat-inner { display: grid; grid-template-columns: 1fr 300px; gap: 60px; padding: clamp(54px,8vw,100px); align-items: center; }
.wildcat .kicker { color: #ffcf47; }
.wildcat h1 { font-size: clamp(48px,7vw,84px); max-width: 780px; }
.wildcat-tagline { font-size: clamp(20px,2.4vw,30px); margin: -8px 0 32px; }
.wildcat-date { font: 700 clamp(22px,3vw,36px)/1.2 Arial,sans-serif; margin: 0 0 8px; }
.wildcat-place { font: 600 16px/1.3 Arial,sans-serif; text-transform: uppercase; letter-spacing: .12em; color: #dbe4ef; }
.wildcat-facts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin: 34px 0; max-width: 680px; }
.fact { border: 1px solid rgba(255,255,255,.28); padding: 18px 20px; }
.fact strong { display:block; font:700 12px/1.3 Arial,sans-serif; text-transform:uppercase; letter-spacing:.1em; color:#ffcf47; margin-bottom:6px; }
.qr-card { background:white; color:var(--ink); padding:24px; text-align:center; }
.qr-card img { width:100%; }
.qr-card p { margin:12px 0 0; font:700 12px/1.4 Arial,sans-serif; text-transform:uppercase; letter-spacing:.08em; }
.wildcat-more { padding: 72px 0 100px; display:grid; grid-template-columns: .8fr 1.2fr; gap:70px; }
.wildcat-more ul { padding-left: 20px; }
.small-note { font-size:14px; color:var(--muted); }

.footer { border-top:1px solid var(--line); padding:42px 0 55px; display:flex; justify-content:space-between; gap:30px; color:var(--muted); font-size:14px; }
.footer strong { color:var(--ink); }

@media (max-width: 820px) {
  .topbar { align-items:flex-start; flex-direction:column; }
  .hero,.two-col,.wildcat-inner,.wildcat-more,.home-split,.detail-split,.international-feature { grid-template-columns:1fr; }
  .hero-photo { min-height:400px; }
  .hero-copy { padding:50px 28px; }
  .feature-strip { grid-template-columns:1fr; }
  .form-grid { grid-template-columns:1fr; gap:0; }
  .media-grid,.video-grid { grid-template-columns:1fr; }
  .stage-gallery { grid-template-columns:1fr 1fr; }
  .stage-gallery-wide { grid-column:1/-1; }
  .stage-gallery img { height:320px; }
  .photo-grid { grid-template-columns:1fr; }
  .photo-grid img,.international-gallery img { height:auto; }
  .wildcat-inner { padding:54px 30px; gap:36px; }
  .qr-card { max-width:280px; }
  .footer { flex-direction:column; }
}

@media (max-width: 520px) {
  .site-shell { width:min(calc(100% - 26px),var(--max)); }
  .nav { gap:14px; }
  .nav a { font-size:11px; }
  .wildcat-facts { grid-template-columns:1fr; }
}