:root { color-scheme: dark; --gold: #f4ca83; --ivory: #faecd4; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: #101b10; color: var(--ivory); font-family: Georgia, 'Times New Roman', serif; }
.page { position: relative; display: grid; grid-template-rows: 1fr auto; min-height: 100svh; text-align: center; padding: clamp(24px, 3.2vh, 50px) 16px clamp(24px, 8vh, 85px); background: url('atelier.png') center / 100% 100% no-repeat; }
main, footer { width: min(45vw, 840px); margin-inline: auto; text-shadow: 0 2px 8px #000; }
.brand { position: relative; color: var(--gold); margin: 0 auto clamp(24px, 4.2vh, 50px); width: 87%; padding: 2.5% 4% 2.2%; }
.plaque { position: absolute; inset: 0; width: 100%; height: 100%; }
svg { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.name { margin: 0; font-size: clamp(1.5rem, 3.9vw, 4.75rem); font-weight: bold; line-height: 1.05; letter-spacing: -.045em; }
.trade { margin: .32em 0; text-transform: uppercase; font-size: clamp(.66rem, 1.8vw, 2rem); font-weight: bold; }
.year { margin: .58em 0 0; font-size: clamp(.63rem, 1.15vw, 1.25rem); text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(2.25rem, 5.65vw, 6.4rem); line-height: .93; letter-spacing: -.05em; }
h1 span { display: block; }
.divider { display: flex; align-items: center; gap: clamp(12px, 2.25vw, 40px); width: 70%; margin: clamp(14px, 2.7vh, 34px) auto; color: var(--gold); }
.divider svg { width: clamp(36px, 4vw, 64px); }
.divider::before, .divider::after { content: ''; flex: 1; height: 2px; background: currentColor; }
.message { margin: 0; font-size: clamp(1.12rem, 2.13vw, 2.4rem); line-height: 1.18; font-style: italic; text-wrap: balance; }
button { position: absolute; top: clamp(16px, 3.2vh, 50px); right: clamp(16px, 2.5vw, 48px); display: inline-flex; align-items: center; gap: .55em; min-height: 44px; padding: .35em 1.1em; border: 2px solid var(--gold); border-radius: 100px; background: #10170e; color: var(--ivory); font: bold clamp(1rem, 1.6vw, 1.75rem) Georgia, serif; cursor: pointer; }
button svg { width: 1.05em; stroke-width: 1.4; }
button:hover { background: #293920; }
footer { padding-top: 32px; font-size: clamp(.9rem, 1.45vw, 1.45rem); }
footer a { color: inherit; font-weight: bold; text-underline-offset: .2em; }
:focus-visible { outline: 2px solid var(--ivory); outline-offset: 4px; }
@media (max-width: 760px) {
  .page { grid-template-rows: auto 1fr auto; padding: 16px 16px 26px; background: linear-gradient(#101b1020, #101b10ed 28%, #101b10ef 80%, #101b1050), url('atelier.png') center top / auto 100% no-repeat; }
  button { position: static; justify-self: end; }
  main, footer { width: min(100%, 530px); }
  main { align-self: center; padding-top: 30px; }
  .brand { width: 98%; padding: 12px 9px 10px; }
  .name { font-size: clamp(1.5rem, 6.6vw, 2.75rem); }
  h1 { font-size: clamp(2.35rem, 10vw, 4.6rem); }
  .trade { font-size: clamp(.68rem, 2.7vw, 1.1rem); }
  .message { font-size: clamp(1.12rem, 4.7vw, 1.6rem); }
}