/* Gem'StonEyes — Obsidienne / or / lumière spectrale. */
:root {
  --ink: #e9edeb;
  --dark: #030405;
  --paper: #080b0d;
  --muted: #a4b0b0;
  --line: #293437;
  --green: #7ad8c9;
  --gold: #dfbd75;
}
html { background: #000; color-scheme: dark; }
body { background: radial-gradient(ellipse at 90% 20%, #0c202233, transparent 45%), #080b0d; }
::selection { background: #b6a16a; color: #080b0d; }
.site-header { background: #070a0cf2; border-bottom: 1px solid #b5a16a36; height: 105px; position: relative; z-index: 3; }
.wordmark { font: 500 19px/1.15 var(--sans); letter-spacing: -.5px; color: #e2c58b; gap: 13px; }
.brand-image { width: 56px; height: 56px; border-radius: 50%; object-fit: contain; border: 1px solid #8d7a4b66; box-shadow: 0 0 19px #5bd0c60b; }
.wordmark small { font-size: 7px; letter-spacing: 2px; color: #a5b6b5; margin-top: 7px; }
.site-header nav { color: #d9dfdc; font-size: 11px; letter-spacing: .2px; }
.site-header nav a { position: relative; }
.site-header nav a:after { content: ''; position: absolute; inset: auto 0 -9px; height: 1px; transform: scaleX(0); transform-origin: left; background: var(--gold); transition: transform .25s; }
.site-header nav a:hover { color: var(--gold); text-decoration: none; }
.site-header nav a:hover:after { transform: scaleX(1); }
.selection-button { color: #d8e1db; background: #101719; border-color: #485043; }
.selection-button span { color: #090d0f; background: #d9bd7f; }
.hero { position: relative; background: #030507; color: var(--ink); isolation: isolate; }
.hero-copy { position: relative; background: radial-gradient(ellipse at 15% 15%, #12312d44, transparent 65%); overflow: hidden; }
.hero-copy:before { content: ''; width: 650px; height: 650px; position: absolute; pointer-events: none; left: -340px; top: 40px; border: 1px solid #538d8530; border-radius: 50%; box-shadow: 0 0 0 19px #0f1c1c, 0 0 0 20px #538d8515, 0 0 0 59px #050b0d, 0 0 0 60px #538d8515; z-index: -1; }
.hero-copy:after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 49.9%, #99ada706 50%, transparent 50.2%), linear-gradient(0deg, transparent 49.9%, #99ada706 50%, transparent 50.2%); background-size: 70px 70px; pointer-events: none; z-index: -1; }
.hero h1 { font-family: var(--sans); font-weight: 500; font-size: clamp(53px, 5.3vw, 83px); letter-spacing: -4.4px; line-height: 1.06; }
.hero h1 em { font-family: var(--serif); font-size: .95em; letter-spacing: -3px; display: inline-block; background: linear-gradient(115deg, #a98b48, #f6dfaa 43%, #bd9348 66%, #f5dda2); background-clip: text; -webkit-background-clip: text; color: transparent; margin-top: 4px; }
.hero .eyebrow { color: #d9c38b; letter-spacing: 2.8px; font-size: 9px; }
.hero .eyebrow span { background: #74d9cb; box-shadow: 0 0 10px #74d9cb88; }
.hero-intro { color: #aab7b5; }
.hero-foot { color: #a3b5b0; }
.hero-art { background: #020405; border-left: 1px solid #89754840; clip-path: polygon(6% 0,100% 0,100% 94%,94% 100%,0 100%,0 6%); }
.hero-art>img { filter: brightness(.74) saturate(.96); }
.hero-art:after { background: linear-gradient(0deg, #030a0dcc, transparent 45%, #030a0d33); }
.art-tag { color: #eddbb6; border-color: #c3a46270; background: #050b0d66; letter-spacing: 2px; }
.art-caption { color: #eddbb6; }
.button { padding: 16px 22px; border: 1px solid transparent; transition: transform .25s, box-shadow .25s, background .25s; }
.button-cream, .button-dark { background: linear-gradient(110deg, #c6a45e, #e8cd92); color: #090c0e; border-color: #e8cd92; }
.button:hover { box-shadow: 0 0 25px #d3b77925; }
.button-dark:hover { background: #e9d7ac; color: #070c0d; }
.intro-ribbon { background: #0b1315; border-color: #4b58493b; color: #abb9b6; letter-spacing: .2px; }
.intro-ribbon>span { color: #b99b5e; }
.section-heading .eyebrow, .gallery-status { color: #bba776; }
h2 { font-family: var(--sans); font-weight: 400; letter-spacing: -2px; }
h2 em { font-family: var(--serif); color: #d4b474; letter-spacing: -1.4px; }
.section-heading>p, .gallery-note { color: #a1b2af; }
.gallery-toolbar { border-color: #314141; }
.filters button { color: #9eadab; letter-spacing: .2px; }
.filters button.active { color: #f2d99e; }
.filters button.active:after { background: #d8bb78; box-shadow: 0 0 9px #d8bb7833; }
.search { color: #a6b7b2; }
.search input { color: #e1e9e5; }
.search input::placeholder { color: #99aaa6; }
.photo-frame { background: #11191a; outline: 1px solid #55696455; outline-offset: 4px; transition: outline-color .3s; }
.photo-frame:hover { outline-color: #b6a061; }
.photo-open { background: #080e10; }
.photo-open:after { content: ''; position: absolute; inset: 0; border: 1px solid #ae98662b; pointer-events: none; }
.photo-caption h3 { font-family: var(--sans); font-size: 18px; font-weight: 400; color: #dce5df; letter-spacing: -.3px; }
.photo-caption span { color: #a7bdb8; font-family: monospace; font-size: 9px; }
.photo-category { color: #baab86; font-size: 9px; letter-spacing: 1.6px; }
.add-photo { background: #0d191ce6; color: #f1d69a; border: 1px solid #b39b6277; }
.add-photo[aria-pressed=true] { color: #05110e; background: #8cd9c7; border-color: #8cd9c7; }
.studio-section { background: #0c1417; border-top: 1px solid #33484677; border-bottom: 1px solid #33484677; }
.studio-visual { background: #070c0f; border: 1px solid #708c7a55; clip-path: polygon(0 0,92% 0,100% 8%,100% 100%,8% 100%,0 92%); }
.vertical-label { color: #edcf94; }
.studio-copy>.eyebrow { color: #c4ae78; }
.studio-copy>p:not(.eyebrow) { color: #a5b5b2; }
.studio-principles>div { border-color: #354240; }
.studio-principles>div>span { color: #d2b36e; font-family: monospace; }
.studio-principles small { color: #a0b3ae; }
.services { border-color: #34423d; }
.service-number { color: #bca674; }
.services h3 { font-family: var(--sans); color: #e4e9e3; font-weight: 400; letter-spacing: -1.1px; }
.services p { color: #a5b6b0; }
.services a { border-color: #34423d; color: #e0c38b; }
.services .digital-note { color: #8cd1c2; }
.contact-section { color: #e4eae5; background: radial-gradient(ellipse at 5% 95%, #14342d55, transparent 60%), #0e181b; border-top: 1px solid #40534966; border-bottom: 1px solid #40534966; }
.contact-copy>.eyebrow { color: #dfc185; }
.contact-copy h2 em { color: #dfc185; }
.contact-copy>p:not(.eyebrow) { color: #a9bab3; }
.contact-copy .contact-note { color: #99afa6!important; }
.instagram-link { color: #b2e6d7; border-color: #6f9c8d; }
.project-form>label,.project-form #prepared-message>label { color: #b8c7be; }
.project-form select,.project-form textarea { color: #ecf0e9; border-color: #5e766a; background: #070d10aa; }
.project-form select option { background: #101b1c; color: #e9eee8; }
.project-form textarea::placeholder { color: #97ada2; }
.project-form .button { background: linear-gradient(110deg, #c6a45e, #e8cd92); color: #090c0e; }
.request-selection { color: #a4c4b7; }
#prepared-message { border-color: #587363; }
#prepared-message p { color: #adbbaf; }
.message-actions button { color: #e6ca91; }
.message-actions a { color: #9fe0ce; }
.faq-section>.eyebrow { color: #c7ad70; }
.faq-section details { border-color: #34413c; }
.faq-section details:last-child { border-color: #34413c; }
.faq-section details>p { color: #a3b6ac; }
summary>span { color: #d8b977; }
.site-footer { background: #040809; border-top: 1px solid #6a76532c; }
.site-footer>p { color: #b9b99e; }
.replay-intro { color: #e4c381; display: inline-flex; gap: 25px; align-items: center; border-bottom: 1px solid #79684699; padding-bottom: 6px; }
.replay-intro>span { font-size: 18px; }
.footer-bottom { color: #a7b5a9; border-color: #364239; }
.footer-bottom button,.footer-bottom a { color: #b5c1b7; }
dialog { background: #0d1619; border: 1px solid #526357; color: #e3ebe4; box-shadow: 0 20px 90px #000a; }
dialog::backdrop { background: #000c; }
.lightbox-image { background: #020405; }
.lightbox-prev,.lightbox-next { background: #0e191de0; color: #f6db9f; border: 1px solid #b49c6377; }
.lightbox-detail .eyebrow { color: #d4b97d; }
.lightbox-detail>p:not(.eyebrow),.lightbox-detail dt { color: #a6bbb0; }
.lightbox-detail h2 { font-size: 35px; }
.lightbox-detail dl>div { border-color: #3e5047; }
.selected-row { border-color: #34443d; }
.selected-row h3 { font-size: 17px; font-family: var(--sans); }
.dialog-note,.selection-empty,.info-dialog p { color: #a3b8ac; }
.toast { background: #d7bd83; color: #0b1110; }
.skip-link { background: #10211c; color: #e8d5a9; }
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible { outline-color: #b9e8d2; }
@media(max-width:1050px) {
  .wordmark { font-size: 16px; }
  .brand-image { width: 49px; height: 49px; }
  .wordmark small { font-size: 6px; letter-spacing: 1.4px; }
  .site-header nav { gap: 17px; font-size: 10px; }
  .hero h1 { font-size: 60px; letter-spacing: -3px; }
}
@media(max-width:760px) {
  .site-header { height: 86px; padding: 0 5%; gap: 9px; }
  .brand-image { width: 41px; height: 41px; }
  .wordmark { gap: 8px; font-size: 13px; letter-spacing: -.35px; }
  .wordmark small { font-size: 5px; letter-spacing: 1.05px; }
  .selection-button { font-size: 8px; gap: 7px; padding: 8px; }
  .selection-button span { width: 18px; height: 18px; font-size: 9px; }
  .hero h1 { font-size: clamp(43px, 10vw, 64px); letter-spacing: -2.2px; }
  .hero h1 em { letter-spacing: -1.7px; }
  .hero-art { border-left: 0; border-top: 1px solid #98845455; clip-path: polygon(0 0,95% 0,100% 5%,100% 100%,5% 100%,0 95%); }
  .section-heading h2 { font-size: 36px; letter-spacing: -1.5px; }
  .photo-caption h3 { font-size: 15px; }
  .photo-category { font-size: 7px; letter-spacing: 1px; }
  .services article { border-color: #31443b; }
  .project-form { border-color: #4b6658; }
  .lightbox-detail .close-button { background: #11201c; color: #edcf90; border: 1px solid #a3b79e; }
  .site-footer .wordmark { font-size: 18px; }
  .site-footer .brand-image { width: 52px; height: 52px; }
  .site-footer .wordmark small { font-size: 6px; }
}
@media(max-width:359px) {
  .hero h1 { font-size: 40px; }
  .wordmark { font-size: 11.5px; gap: 6px; }
  .brand-image { width: 35px; height: 35px; }
  .wordmark small { letter-spacing: .6px; }
  .selection-button { font-size: 7px; padding: 7px; }
}
@media(prefers-reduced-motion:reduce) { .site-header nav a:after { transition: none; } }