/* Dream Story Productions — shared styles (ported from the Claude Design canvas sources in site-source/) */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#000;color:#ECE7DF;font-family:'Cormorant Garamond',Georgia,serif;-webkit-font-smoothing:antialiased}
a{color:#C8A46B}a:hover{color:#E3C690}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid #fff;outline-offset:2px;box-shadow:0 0 0 5px #111}
.ds-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ds-mono{font-family:'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase}
.ds-skip{position:fixed;left:12px;top:-80px;z-index:100;background:#fff;color:#000;padding:12px 18px;font-family:'IBM Plex Mono',monospace;font-size:12px;text-decoration:none}
.ds-skip:focus{top:12px}

/* header + nav */
.ds-header{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;justify-content:space-between;align-items:center;padding:18px 28px;mix-blend-mode:difference;color:#fff;pointer-events:none}
.ds-hd{display:contents}
.ds-logo{pointer-events:auto;display:block;line-height:0}
.ds-logo img{height:34px;width:auto}
.ds-nav-links{pointer-events:auto;display:flex;gap:8px;font-size:12px}
.ds-pill{display:inline-flex;align-items:center;min-height:36px;padding:0 18px;font-weight:500;border-radius:999px;background:#fff;color:#000;border:1px solid #fff;text-decoration:none}
.ds-pill:hover,.ds-pill[aria-current="page"]{background:#000;color:#fff;border-color:#fff}
.ds-burger{display:none;pointer-events:auto;width:44px;height:44px;border:0;background:none;color:#fff;align-items:center;justify-content:center;margin-left:auto}
.ds-menu{position:fixed;top:0;left:0;right:0;z-index:39;background:#000;padding:84px 24px 28px;box-shadow:0 30px 60px rgba(0,0,0,.5);animation:dsDrop .35s ease both}
.ds-menu a,.ds-menu button{display:block;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid #2a2a2a;padding:16px 0;color:#ECE7DF;text-decoration:none;font-family:'Cormorant Garamond',Georgia,serif;font-size:34px;font-weight:400;line-height:1.1}
.ds-menu [aria-current="page"]{color:#C8A46B}
.ds-menu a.ds-cta{display:inline-flex;width:auto;align-items:center;min-height:48px;margin-top:26px;padding:0 26px;border:0;border-radius:999px;background:#D9361A;color:#fff;font-family:'IBM Plex Mono',monospace;font-size:12px}

/* red call-to-action pill (#D9361A on white text: 4.6:1) */
.ds-cta{display:inline-flex;align-items:center;min-height:48px;padding:0 28px;border:0;border-radius:999px;background:#D9361A;color:#fff;text-decoration:none;font-size:12px}
.ds-cta:hover{color:#fff;background:#b92d14}

/* forms */
.ds-field{display:flex;flex-direction:column;gap:8px}
.ds-field label{font-size:12px;color:#E4DED5;letter-spacing:.1em}
.ds-req{margin:0;font-size:12px;color:#E4DED5;letter-spacing:.1em}
.ds-field input,.ds-field select,.ds-field textarea{background:transparent;border:0;border-bottom:1px solid #9a9286;padding:12px 0;font-family:'Inter',system-ui,sans-serif;font-size:18px;color:#ECE7DF;border-radius:0}
.ds-field select option{color:#000}
.ds-field input:focus,.ds-field select:focus,.ds-field textarea:focus{border-bottom-color:#fff}
.ds-form-err{margin:0;font-family:'Inter',system-ui,sans-serif;font-size:16px;line-height:1.5;color:#FFB4A3}
.ds-form-err a{color:inherit}
.ds-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}

.ds-footer{border-top:1px solid #1f1f1f;padding:40px 28px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:18px}
.ds-footer img{height:40px;width:auto}

@keyframes dsDrop{from{transform:translateY(-100%)}to{transform:none}}
@keyframes dsRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

@media (max-width:760px){
.ds-nav-links{display:none !important}
.ds-burger{display:flex}
.ds-split{flex-direction:column !important}
/* stacked on phones: each part is only as tall as its content (its desktop width basis would otherwise become height) */
.ds-split{gap:28px !important}
.ds-split>*{flex:0 0 auto !important;width:100%}
.ds-two{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}}
