:root {
  --velvet: #30091f;
  --amethyst: #3a0f3d;
  --gold: #d6b04c;
  --gold-light: #f1d889;
  --cream: #faf1e6;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Montserrat', Arial, sans-serif;
}
*, *::before, *::after {box-sizing:border-box}
html {scroll-behavior:smooth}
body {margin:0;background:#260519;color:var(--cream);-webkit-font-smoothing:antialiased}
.website {min-height:100svh;display:grid;grid-template-columns:52% minmax(0,48%);overflow:hidden}
.visual {background:#210916 url('assets/velvet-painting-scene.jpg') center center / cover no-repeat;min-height:100svh;position:relative}
.visual::after {content:"";position:absolute;top:0;right:-1px;bottom:0;width:7%;background:linear-gradient(90deg,transparent,rgba(32,5,23,.88));pointer-events:none}
.contact-side {display:flex;align-items:center;justify-content:center;min-width:0;position:relative;padding:38px 7% 40px 3%;background:radial-gradient(ellipse 100% 85% at 57% 44%,#390b2b 0%,#28071f 58%,#210419 100%)}
.contact-side::before {content:"";position:absolute;inset:0;pointer-events:none;opacity:.2;background:radial-gradient(ellipse at 20% 8%,rgba(131,47,92,.32),transparent 42%),radial-gradient(ellipse at 89% 67%,rgba(105,23,81,.28),transparent 57%)}
.contact-content {position:relative;z-index:1;width:min(100%,588px);margin:auto;text-align:center}
.brand img {display:block;width:clamp(210px,20vw,303px);height:auto;margin:0 auto}
.fine-rule {width:94px;height:1px;background:linear-gradient(90deg,transparent,#c79c96 25%,#c79c96 75%,transparent);margin-inline:auto}
.rule-top {margin-top:25px;margin-bottom:25px}
h1 {margin:0;white-space:nowrap;color:#faf0db;font-family:var(--serif);font-size:clamp(32px,3.35vw,54px);font-weight:400;line-height:1.12;letter-spacing:.015em}
.personal-intro {margin:12px 0 0;font-family:var(--serif);font-size:clamp(20px,1.72vw,27px);font-weight:400;letter-spacing:.003em;color:#e9d5cf}
.personal-intro em {font-weight:400}
.description {margin:12px auto 0;max-width:600px;font-family:var(--sans);font-size:clamp(12px,.96vw,15px);font-weight:400;line-height:1.65;letter-spacing:.035em;color:#dfc6cb}
.inquiry-form {margin-top:28px;text-align:left}
.form-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.field {min-width:0}
.field-full {grid-column:1/-1}
input,select,textarea {display:block;width:100%;min-width:0;border:1px solid rgba(199,160,177,.56);border-radius:0;color:var(--cream);background:rgba(31,3,21,.25);font:400 11px/1.4 var(--sans);letter-spacing:.18em;padding:0 14px;outline:0;transition:border-color .2s ease, background-color .2s ease}
input,select {height:48px}
textarea {height:103px;min-height:103px;resize:vertical;padding:14px;line-height:1.5}
input::placeholder,textarea::placeholder {color:#e0c9d1;opacity:.9}
select {appearance:none;padding-right:36px;color:#e0c9d1;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d8c4d1' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='m5 9 7 7 7-7'/%3E%3C/svg%3E");background-size:19px;background-position:right 12px center;background-repeat:no-repeat}
select:valid {color:var(--cream)}
select option {background:#30091f;color:var(--cream)}
input:focus-visible,select:focus-visible,textarea:focus-visible {border-color:var(--gold-light);background-color:rgba(67,21,51,.56);box-shadow:0 0 0 1px rgba(214,176,76,.25)}
input[type=date] {color-scheme:dark;font-size:12px;letter-spacing:.05em}
.send-button {height:60px;width:100%;margin:16px 0 0;border:0;border-radius:1px;cursor:pointer;background:linear-gradient(109deg,#b98936 0%,#f0cf7c 44%,#d4a751 74%,#a9752b 100%);color:#231025;font:500 14px/1 var(--sans);letter-spacing:.25em;transition:filter .2s,transform .2s}
.send-button:hover {filter:brightness(1.09);transform:translateY(-1px)}
.send-button:focus-visible,.social:focus-visible {outline:2px solid var(--gold-light);outline-offset:4px}
.send-button span {font-size:22px;vertical-align:-2px;margin-left:10px;letter-spacing:0}
.footer {margin-top:29px}
.rule-bottom {width:57px;margin-bottom:24px}
.social {display:flex;align-items:center;justify-content:center;gap:15px;width:100%;color:var(--gold);text-decoration:none}
.social-side-line {flex:1 1 45px;height:1px;max-width:68px;background:rgba(202,156,168,.33)}
.instagram-icon {width:37px;height:37px;flex:none}
.social-text {display:flex;flex-direction:column;gap:3px;text-align:left}
.social-caption {color:#d5b8c3;font:400 12px var(--sans);letter-spacing:.33em}
.social-name {font:500 21px var(--serif);letter-spacing:.14em;color:#f1e0d4;line-height:1.1}
.social:hover .social-name {text-decoration:underline;text-underline-offset:5px}
.screen-reader,.hidden-field {border:0;clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap}
.skip-link {position:absolute;left:18px;top:-120px;z-index:50;padding:10px 16px;background:var(--cream);color:#30091f;font:14px var(--sans)}
.skip-link:focus {top:18px}
/* Small-height desktops: preserve visual structure while allowing comfortable scroll. */
@media(min-width:901px) and (max-height:960px) {
 .contact-side {padding-block:24px}
 .brand img {width:clamp(185px,16.7vw,268px)}
 .rule-top {margin-block:17px 19px}
 h1 {font-size:clamp(31px,3vw,47px)}
 .personal-intro {margin-top:9px;font-size:24px}
 .description {margin-top:7px;font-size:12.5px}
 .inquiry-form {margin-top:20px}
 input,select {height:44px}
 textarea {height:88px;min-height:88px}
 .send-button {height:54px;margin-top:12px}
 .footer {margin-top:19px}
 .rule-bottom {margin-bottom:18px}
}
@media(min-width:901px) and (max-height:750px) {
 .contact-side {align-items:start}
 .contact-content {padding-top:0}
 .brand img {width:185px}
 .rule-top {margin-block:10px 13px}
 h1 {font-size:38px}
 .personal-intro {font-size:21px}
 .description {font-size:11.5px}
 .inquiry-form {margin-top:14px}
 input,select {height:40px}
 textarea {height:73px;min-height:73px}
 .send-button {height:46px}
 .footer {margin-top:12px}
 .rule-bottom {margin-bottom:12px}
}
@media(max-width:1100px) and (min-width:801px) {
 .website {grid-template-columns:49% minmax(0,51%)}
 .contact-side {padding-inline:4%}
 h1 {font-size:clamp(31px,3.5vw,43px)}
 .brand img {width:220px}
 .description {font-size:12px;letter-spacing:0}
 .personal-intro {font-size:23px}
 input,select,textarea {font-size:10px;letter-spacing:.12em}
 .social-caption {font-size:10px}
}
/* Portrait/tablet: painting becomes an immersive banner; live form stays below. */
@media(max-width:800px) {
 .website {display:block;min-height:100svh}
 .visual {height:clamp(380px,68vh,730px);min-height:0;background-position:center 43%;background-size:cover}
 .visual::after {height:25%;width:100%;inset:auto 0 0;background:linear-gradient(transparent,#240618)}
 .contact-side {padding:38px 7% 54px;background:radial-gradient(ellipse at 52% 35%,#3c102f,#26051b 75%)}
 .contact-content {max-width:588px}
 .brand img {width:clamp(220px,44vw,300px)}
 h1 {font-size:clamp(35px,7vw,53px);white-space:normal}
 .personal-intro {font-size:clamp(22px,4vw,27px)}
 .description {font-size:13px}
 .inquiry-form {margin-top:25px}
}
@media(max-width:480px) {
 .visual {height:390px;background-position:center center}
 .contact-side {padding:30px 6% 46px}
 .brand img {width:216px}
 .rule-top {margin-top:17px;margin-bottom:20px}
 h1 {font-size:37px;line-height:1.1}
 .description {font-size:12px;line-height:1.75}
 .desktop-break {display:none}
 .form-grid {grid-template-columns:1fr;gap:9px}
 .field-full {grid-column:auto}
 input,select {height:49px}
 textarea {height:105px}
 .social-side-line {max-width:28px}
 .social-caption {font-size:9px}
 .social-name {font-size:19px}
 .instagram-icon {width:30px;height:30px}
}
/* Accessible thank you */
.thank-page {display:grid;place-items:center;min-height:100svh;background:radial-gradient(ellipse at center,#4c1337,#24051b 70%);padding:25px}
.thank-content {width:min(100%,520px);text-align:center;padding:40px 20px;color:var(--cream)}
.thank-content img {display:block;width:230px;max-width:80%;height:auto;margin:0 auto 25px}
.thank-content h1 {white-space:normal;font-size:55px}
.thank-content p {font:24px/1.35 var(--serif)}
.return-link {display:inline-block;margin-top:14px;padding:17px 30px;background:var(--gold);color:#29071d;text-decoration:none;font:500 12px var(--sans);letter-spacing:.17em}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}