.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 10; padding: .75rem 1rem; background: var(--cream); color: var(--ink); }
.skip-link:focus { top: 1rem; }
.site-header { position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; padding: 1rem max(1rem, calc((100vw - var(--max-width)) / 2)); border-bottom: 1px solid var(--line); background: rgba(17,18,16,.94); backdrop-filter: blur(12px); }
.brand { display: flex; align-items: center; gap: .7rem; color: var(--cream); text-decoration: none; }
.brand-mark { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid var(--copper); color: var(--copper); font: 700 1rem var(--font-display); transform: rotate(-4deg); }
.brand strong, .brand small { display: block; }
.brand strong { font: 700 .9rem var(--font-display); letter-spacing: .08em; }
.brand small { margin-top: .2rem; color: var(--muted); font-size: .55rem; letter-spacing: .18em; }
.site-header nav { display: flex; align-items: center; color: var(--muted); }
.language-button { padding: .5rem; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.language-button.is-active { color: var(--gold); font-weight: 700; }
main { overflow: hidden; }
.hero { max-width: var(--max-width); margin: 0 auto; padding: clamp(4rem, 10vw, 8rem) 1rem clamp(2.5rem, 6vw, 5rem); }
.hero::after { content: ""; position: absolute; right: -15vw; top: 5rem; width: 55vw; height: 55vw; max-width: 700px; max-height: 700px; background: radial-gradient(circle, rgba(185,130,79,.13), transparent 65%); pointer-events: none; }
.hero h1 { position: relative; max-width: 850px; margin: .5rem 0 1rem; font: 600 clamp(2.6rem, 7vw, 6rem)/.98 var(--font-display); letter-spacing: -.035em; }
.hero > p:last-child { max-width: 650px; color: var(--muted); line-height: 1.7; }
.studio-grid { display: grid; max-width: var(--max-width); margin: 0 auto; padding: 0 1rem 5rem; gap: 1rem; }
.drop-zone { position: relative; display: grid; min-height: 250px; place-items: center; align-content: center; gap: .55rem; overflow: hidden; border: 1px dashed rgba(212,165,111,.55); background: rgba(185,130,79,.05); text-align: center; cursor: pointer; }
.drop-zone.is-dragging { background: rgba(185,130,79,.14); }
.drop-zone input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.drop-zone small { color: var(--muted); }
.upload-icon { color: var(--copper); font-size: 2.5rem; font-weight: 200; }
#upload-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.privacy-note { margin: 1rem 0 0; color: var(--muted); font-size: .78rem; line-height: 1.55; }
.action-panel { padding: 1.5rem 0; text-align: center; }
.result-section { max-width: var(--max-width); margin: 0 auto 5rem; padding: clamp(1rem, 4vw, 3rem); background: var(--cream); color: var(--ink); }
.result-section .eyebrow { color: #80552f; }
.result-copy h2 { margin: .2rem 0 .8rem; font: 600 clamp(2rem, 6vw, 4.5rem) var(--font-display); }
.result-copy p:last-child { color: #554d44; line-height: 1.7; }
.result-frame { margin: 1.5rem 0; background: #d9cebd; }
.result-frame img { display: block; width: 100%; max-height: 800px; object-fit: contain; }
.result-actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.result-section .button-secondary { color: var(--ink); }
footer { padding: 2rem 1rem; border-top: 1px solid var(--line); color: var(--muted); text-align: center; font-size: .7rem; letter-spacing: .13em; }

@media (min-width: 760px) {
  .studio-grid { grid-template-columns: 1fr 1.25fr; }
  .workflow-card.compact, .action-panel { grid-column: 1 / -1; }
  .layout-options { grid-template-columns: 1fr 1fr; }
  .option-grid { grid-template-columns: repeat(3, 1fr); }
  .result-section { display: grid; grid-template-columns: .7fr 1.3fr; gap: 2rem; align-items: start; }
  .result-frame { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
  .result-actions { align-self: end; }
}