/* Golden Thorns authentication: adapt spacing to viewport width and height. */
.golden-auth { --mint:#8a6b2f; --mint-dark:#6f5423; --mint-soft:#f1eadc; --ink:#292b26; --muted:#78786e; --line:#e4dfd5; min-height:100dvh; color:var(--ink); background:radial-gradient(ellipse at 10% 0%,#e1dbca 0,transparent 48%),#f0eee9; padding:clamp(12px,3vh,32px); }
.golden-auth :focus-visible { outline-color:#a88742; }
.golden-auth .auth-layout { width:min(1140px,100%); min-height:min(730px,calc(100dvh - 64px)); grid-template-columns:1.04fr 1fr; border:1px solid #dcd7cb; border-radius:8px; background:#fdfcf9; box-shadow:0 28px 80px #302b201a; }
.golden-auth .auth-story { padding:42px; color:#f4f0e6; background:radial-gradient(ellipse at 95% 0%,#454536 0,transparent 60%),#252722; }
.golden-auth .golden-brand { display:flex; align-items:center; gap:15px; color:#e0c988; width:fit-content; }
.golden-auth .golden-brand:hover { color:#f6e4b6; }
.golden-auth .golden-logo { display:block; flex:0 0 66px; width:66px; height:66px; border-radius:50%; background:url('../image/golden-thorns/logo-reference.jpeg') 50% 41.1% / 151.02% auto no-repeat; box-shadow:0 0 0 1px #c9b47645; }
.golden-auth .golden-wordmark { font:20px/1.2 Georgia,'Times New Roman',serif; letter-spacing:1.6px; }
.golden-auth .golden-wordmark small { display:block; margin-top:9px; font:8px/1.5 'Segoe UI',sans-serif; letter-spacing:2.8px; color:#c3bead; }
.golden-story-copy { margin:52px 0 30px; }
.golden-kicker { font-size:9px; letter-spacing:2.6px; color:#ccb77e; margin:0 0 17px; }
.golden-auth .auth-story h2 { font:52px/1.08 Georgia,'Times New Roman',serif; letter-spacing:-1.5px; margin:0 0 22px; max-width:none; }
.golden-auth .auth-story h2 em { font-weight:400; color:#ddc78e; }
.golden-story-copy > p:last-child { font-size:13px; line-height:1.9; color:#c4c4b7; margin:0; }
.golden-gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:30px; }
.golden-photo { position:relative; overflow:hidden; aspect-ratio:197 / 249; margin:0; border:1px solid #b6a57a40; background:#76766e; }
.golden-photo img { position:absolute; width:300.51%; height:auto; max-width:none; left:0; top:-78.31%; }
.golden-photo-ear { transform:translateY(12px); }
.golden-photo-ear img { left:-100.51%; top:-183.94%; }
.golden-photo-gems img { left:-201.02%; top:-185.14%; }
.golden-auth .auth-story-footer { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; padding-top:22px; border-top:1px solid #c9b47630; color:#bcb9ab; font-size:8px; letter-spacing:1.2px; }
.golden-auth .auth-story-footer a { color:#dbc68c; font-size:10px; letter-spacing:.3px; }
.golden-auth .auth-story-footer .ui-icon { width:13px; height:13px; }
.golden-auth .auth-content { padding:58px; }
.golden-auth .auth-mark { border:1px solid #d4c398; background:transparent; color:#94763b; border-radius:50%; width:44px; height:44px; margin-bottom:26px; }
.golden-auth .eyebrow { color:#846b39; font-size:9px; letter-spacing:2px; font-weight:600; margin-bottom:14px; }
.golden-auth .auth-content h1 { font:36px/1.18 Georgia,'Times New Roman',serif; letter-spacing:-.8px; margin-bottom:16px; }
.golden-auth .auth-intro { font-size:13px; line-height:1.85; margin-bottom:32px; }
.golden-auth .form-control { background:#fdfcf9; border-color:#dcd7ca; border-radius:4px; min-height:50px; color:#292b26; }
.golden-auth .form-control::placeholder { color:#98968c; }
.golden-auth .form-control:focus { border-color:#a88b4c; box-shadow:0 0 0 3px #a88b4c20; }
.golden-auth .auth-link { color:#80652f; font-size:12px; }
.golden-auth .btn-primary { --bs-btn-bg:#8a6b2f; --bs-btn-border-color:#8a6b2f; --bs-btn-hover-bg:#705423; --bs-btn-hover-border-color:#705423; --bs-btn-active-bg:#5b451f; --bs-btn-active-border-color:#5b451f; --bs-btn-focus-shadow-rgb:138,107,47; min-height:50px; border-radius:4px; font-weight:500; letter-spacing:.5px; }
.golden-auth .btn-primary .ui-icon { margin:0 0 0 12px; }
.golden-auth .auth-help { border-top:1px solid var(--line); padding-top:25px; margin-top:30px; font-size:10px; }
.golden-auth .auth-help .ui-icon { width:14px; height:14px; margin-right:5px; color:#94763b; }
@media (max-width:1050px) {
.golden-auth { padding:24px; }
.golden-auth .auth-story { padding:30px; }
.golden-auth .auth-content { padding:36px; }
.golden-auth .auth-story h2 { font-size:46px; }
.golden-auth .golden-wordmark { font-size:17px; }
.golden-auth .golden-wordmark small { font-size:7px; letter-spacing:2px; }
.golden-auth .golden-logo { flex-basis:55px; width:55px; height:55px; }
}
@media (max-width:767px) {
.golden-auth { padding:18px; }
.golden-auth .auth-layout { display:block; max-width:480px; min-height:0; border-radius:8px; }
.golden-auth .auth-story { padding:24px 28px; }
.golden-auth .golden-story-copy,.golden-auth .golden-gallery,.golden-auth .auth-story-footer { display:none; }
.golden-auth .auth-content { padding:35px 28px; }
.golden-auth .auth-content h1 { font-size:32px; }
.golden-auth .auth-mark { display:none; }
.golden-auth .eyebrow { font-size:8px; letter-spacing:1.6px; }
}
@media (max-width:360px) {
.golden-auth { padding:10px; }
.golden-auth .auth-story { padding:20px; }
.golden-auth .auth-content { padding:28px 20px; }
.golden-auth .golden-wordmark { font-size:15px; }
}
/* Compact tall decorative content before sacrificing form accessibility. */
@media (max-height:820px) {
.golden-auth { padding:16px; }
.golden-auth .auth-layout { min-height:min(620px,calc(100dvh - 32px)); }
.golden-auth .auth-story { padding:28px; }
.golden-auth .golden-logo { flex-basis:50px; width:50px; height:50px; }
.golden-auth .golden-story-copy { margin:26px 0 22px; }
.golden-auth .auth-story h2 { font-size:42px; margin-bottom:16px; }
.golden-auth .golden-gallery { max-width:330px; margin-bottom:22px; }
.golden-auth .auth-story-footer { padding-top:16px; }
.golden-auth .auth-content { padding:28px 38px; }
.golden-auth .auth-mark { display:none; }
.golden-auth .eyebrow { margin-bottom:10px; }
.golden-auth .auth-content h1 { font-size:32px; margin-bottom:12px; }
.golden-auth .auth-intro { line-height:1.6; margin-bottom:20px; }
.golden-auth .auth-help { margin-top:18px; padding-top:16px; }
.golden-auth .auth-notice { margin:12px 0 0; padding:10px 12px; }
}
@media (max-height:650px) {
.golden-auth { padding:10px; }
.golden-auth .auth-layout { min-height:0; }
.golden-auth .auth-content { padding:20px 32px; }
.golden-auth .auth-content h1 { font-size:28px; }
.golden-auth .auth-intro { margin-bottom:14px; font-size:12px; }
.golden-auth .auth-help { display:none; }
.golden-auth .golden-story-copy { margin:20px 0; }
.golden-auth .golden-story-copy > p:last-child { display:none; }
.golden-auth .golden-gallery { max-width:270px; }
.golden-auth .auth-story h2 { font-size:36px; }
}
@media (max-width:767px) and (max-height:820px) {
.golden-auth .auth-layout { min-height:0; }
.golden-auth .auth-story { padding:18px 24px; }
.golden-auth .auth-content { padding:24px; }
}
@media (max-width:767px) and (max-height:650px) {
.golden-auth .auth-story { padding:12px 22px; }
.golden-auth .golden-logo { flex-basis:36px; width:36px; height:36px; }
.golden-auth .auth-content { padding:18px 22px; }
.golden-auth .auth-intro { display:none; }
.golden-auth .auth-content h1 { font-size:26px; }
.golden-auth .auth-content .mb-3 { margin-bottom:10px !important; }
}
@media (max-height:480px) and (min-width:768px) {
.golden-auth .golden-gallery,.golden-auth .auth-story-footer,.golden-auth .auth-intro { display:none; }
.golden-auth .auth-content { padding:18px 30px; }
}
