/* Jayden Seeley — website styles. Adjust the colors in :root to retheme. */
:root { --paper:#f1ede5; --ink:#251f1a; --secondary:#716457; --hairline:#cfc5b8; --accent:#9b6849; --light:#f7f1e7; }
*, *::before, *::after {box-sizing:border-box}
html { scroll-behavior:smooth }
body { margin:0; background:var(--paper); color:var(--ink); -webkit-font-smoothing:antialiased; font-family:Arial,Helvetica,sans-serif; }
body:before { content:""; position:fixed; inset:0; opacity:.11; pointer-events:none; z-index:10; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 170 170' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.77' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.18'/%3E%3C/svg%3E"); }
button, a { -webkit-tap-highlight-color:transparent; }
a { color:inherit; }
.wrap { width:min(100% - 92px, 1330px); margin-inline:auto; }
.topbar { height:90px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--hairline); }
.wordmark { font-weight:700; font-size:12px; letter-spacing:.29em; text-decoration:none; white-space:nowrap; }
.nav { display:flex; align-items:center; gap:38px; }
.nav a {font-size:10px; font-weight:700; letter-spacing:.2em; text-decoration:none; transition:color .2s; }
.nav a:hover, .wordmark:hover { color:var(--accent); }
/* Homepage studio photo — intentionally uncaptioned for the quiet editorial layout. */
.studio-hero { margin-top:32px; overflow:hidden; background:#d9c7b6; }
.studio-hero-image { display:block; width:100%; height:auto; aspect-ratio:2.12/1; object-fit:cover; object-position:50% 49%; }

.gallery-intro { padding-top:72px; padding-bottom:29px; display:flex; align-items:end; justify-content:space-between; gap:25px; }
.identity { display:flex; flex-direction:column; gap:20px; }
.eyebrow {font-size:10px; letter-spacing:.27em; font-weight:700; text-transform:uppercase; color:var(--secondary); }
.gallery-title {font-family:Georgia,'Times New Roman',serif; font-weight:400; font-size:clamp(38px,4.1vw,60px); letter-spacing:-.048em; line-height:1; margin:0; }
.issue {font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--secondary); padding-bottom:8px; white-space:nowrap; }
.work-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); column-gap:15px; row-gap:17px; }
.record { position:relative; appearance:none; display:block; padding:0; width:100%; aspect-ratio:1/1; overflow:hidden; border:0; background:#c6b6a5; text-align:center; color:var(--light); cursor:pointer; }
.record>img { width:100%; height:100%; display:block; object-fit:cover; transition:transform .7s cubic-bezier(.2,.75,.12,1),filter .4s; }
.reveal {position:absolute; display:grid; place-items:center; inset:0; opacity:0; background:rgba(28,23,19,.78); transition:opacity .33s ease; padding:16px; }
.reveal-inner { display:flex; flex-direction:column; align-items:center; gap:10px; transform:translateY(9px); transition:transform .4s ease; }
.artist { font-size:9px; line-height:1.5; font-weight:700; letter-spacing:.16em; }
.release { font-family:Georgia,'Times New Roman',serif; font-style:italic; font-size:clamp(18px,1.65vw,26px); line-height:1.12; letter-spacing:-.045em; }
.credit { font-size:9px; line-height:1.5; letter-spacing:.08em; text-transform:uppercase; color:#dbcec0; }
.long-name .release {font-size:clamp(16px,1.35vw,22px); line-height:1.15;}
.record-more {font-size:9px; letter-spacing:.22em; font-weight:700; margin-top:12px; border-bottom:1px solid currentColor; padding-bottom:7px; }
.record-more span {font-size:13px; margin-left:7px; }
.record:hover .reveal, .record:focus-visible .reveal, .record.is-revealed .reveal {opacity:1;}
.record:hover .reveal-inner, .record:focus-visible .reveal-inner, .record.is-revealed .reveal-inner {transform:translateY(0);}
.record:hover>img, .record:focus-visible>img, .record.is-revealed>img {transform:scale(1.035);}
.record:focus-visible, a:focus-visible, button:focus-visible {outline:2px solid var(--accent); outline-offset:4px; }
.grid-endnote {text-align:right; margin:15px 0 0; font-size:10px; letter-spacing:.12em; color:#97897d; }
.about {border-top:1px solid var(--hairline); margin-top:112px; padding-top:75px; padding-bottom:96px; display:grid; grid-template-columns:minmax(170px,1fr) minmax(0,1.65fr); column-gap:clamp(65px,8vw,170px);}
.sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.section-label {font-size:10px; letter-spacing:.22em; text-transform:uppercase; font-weight:700; color:var(--secondary); margin-top:8px; }
.about-text p {font:400 clamp(18px,1.5vw,21px)/1.65 Georgia,'Times New Roman',serif; letter-spacing:-.015em; margin:0; color:#51473d; max-width:670px; }
.inquiries {border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); padding:66px 0 70px; display:flex; justify-content:space-between; gap:30px; align-items:end; }
.inquiries h2 {font:400 clamp(33px,4.3vw,58px)/1.08 Georgia,'Times New Roman',serif; letter-spacing:-.04em; margin:20px 0 14px; }
.inquiries p {font-size:12px; color:var(--secondary); line-height:1.7; margin:0; max-width:420px; }
.contact-link {display:inline-flex; gap:16px; font-size:10px; text-decoration:none; letter-spacing:.2em; font-weight:700; border-bottom:1px solid var(--ink); padding:12px 0; white-space:nowrap; }
.contact-link:hover {color:var(--accent); border-color:var(--accent);}
.footer {display:flex; align-items:center; justify-content:space-between; gap:16px; padding:25px 0 45px; color:#8d8175; font-size:9px; letter-spacing:.15em; text-transform:uppercase; }
.footer a {text-decoration:none;}
.preview-disclaimer {font-size:10px; color:#97897d; line-height:1.5; max-width:530px; margin:0 0 45px;}
dialog {width:min(480px,calc(100vw - 36px)); max-height:90vh; overflow:auto; background:var(--paper); color:var(--ink); border:1px solid var(--hairline); padding:28px; box-shadow:0 40px 150px #21171059; }
dialog::backdrop {background:#201813aa; }
.modal-top {display:flex; justify-content:space-between; align-items:center; margin-bottom:25px;}
.modal-top span {font-weight:700; font-size:10px; letter-spacing:.22em;}
.close {border:0; background:none; color:var(--ink); cursor:pointer; font:30px/1 Arial,sans-serif;}
.modal-art {display:block; width:100%; aspect-ratio:1; object-fit:cover; margin-bottom:25px;}
.modal-artist {font-size:10px; font-weight:700; letter-spacing:.2em; color:var(--secondary); margin:0 0 9px;}
.modal-title {font:400 37px/1.1 Georgia,serif; letter-spacing:-.04em; margin:0 0 10px;}
.modal-role {font-size:12px; letter-spacing:.1em; text-transform:uppercase; margin:0 0 25px;}
.modal-note {border-top:1px solid var(--hairline); padding-top:18px; font-size:12px; color:var(--secondary); line-height:1.6; margin:0;}
@media (max-width:1100px) {.work-grid {grid-template-columns:repeat(3,minmax(0,1fr));} }
@media (min-width:601px) and (max-width:1060px) {.work-grid {grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (max-width:800px) {.wrap {width:calc(100% - 54px)} .topbar {height:80px;} .gallery-intro {padding-top:54px;} .work-grid {gap:12px;} .about {grid-template-columns:1fr; row-gap:27px;} .about-text p {max-width:700px;} }
@media (max-width:600px) {.wrap {width:calc(100% - 36px);} .topbar {height:69px;} .wordmark {font-size:10px; letter-spacing:.17em;} .nav {gap:16px;} .nav a {font-size:9px; letter-spacing:.08em;} .studio-hero {margin-top:18px;} .studio-hero-image {aspect-ratio:5/4; object-position:53% 48%;} .gallery-intro {padding-top:46px; padding-bottom:23px; align-items:flex-start;} .identity {gap:16px;} .eyebrow {font-size:8px; letter-spacing:.16em;} .gallery-title {font-size:38px;} .issue {display:none;} .work-grid {grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;} .reveal {padding:10px;} .reveal-inner {gap:7px;} .artist {font-size:8px;letter-spacing:.12em;} .release {font-size:19px;} .long-name .release {font-size:16px;} .credit {font-size:8px;letter-spacing:.06em;} .record-more {font-size:8px;margin-top:2px;letter-spacing:.08em;} .grid-endnote {font-size:9px;} .about {margin-top:78px; padding-top:48px; padding-bottom:70px; gap:24px;} .about-text p {font-size:18px; line-height:1.58;} .inquiries {padding:46px 0 51px; flex-direction:column; align-items:flex-start; gap:25px;} .inquiries h2 {font-size:38px; margin:17px 0 11px;} .footer {padding:23px 0 38px; font-size:8px; flex-wrap:wrap; row-gap:8px;} .preview-disclaimer {font-size:9px;} }
@media(prefers-reduced-motion:reduce) { html {scroll-behavior:auto;} *, *::before, *::after { transition-duration:0.01ms!important; animation-duration:0.01ms!important;} }

.spotify-link {display:inline-flex; align-items:center; gap:12px; border:1px solid #3f4b3f; background:#344336; color:#f6f0e5; font:700 11px/1 Arial,Helvetica,sans-serif; letter-spacing:.16em; text-decoration:none; padding:17px 24px; margin:5px 0 11px; transition:background .2s,transform .2s;}
.spotify-link:hover {background:#24342a; transform:translateY(-1px);}
.spotify-link:focus-visible {outline:2px solid #9b6849; outline-offset:4px;}