:root {
  color-scheme: light;
  --ink: #332315;
  --bronze: #8a6a31;
  --rule: #a68a58;
  --paper: #f1e8d7;
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  padding: clamp(24px, 6vh, 64px) clamp(16px, 5vw, 64px);
  color: var(--ink);
  background: radial-gradient(ellipse at 50% 36%, #fff9ec33, #aa875b38),
    url("marmer.webp") center / 760px auto repeat var(--paper);
}

main {
  position: relative;
  display: grid;
  justify-items: center;
  gap: clamp(26px, 4.8vh, 54px);
  width: min(100%, 1136px);
  padding: clamp(25px, 5vh, 52px) clamp(14px, 4.5vw, 70px) clamp(31px, 6vh, 66px);
  border: 1px solid var(--rule);
  border-radius: clamp(15px, 2.8vw, 30px);
  background: linear-gradient(145deg, #fffcf0b3, #f7eeddb5 58%, #ebddc49c);
  box-shadow: 0 18px 54px #5b411626, inset 0 0 0 4px #fffaf07a;
}

main::before {
  position: absolute;
  inset: 7px;
  border: 1px solid #a68a5866;
  border-radius: inherit;
  pointer-events: none;
  content: "";
}

.brand {
  display: grid;
  justify-items: center;
  gap: 12px;
}

.logo {
  display: block;
  width: clamp(60px, 10vh, 98px);
  height: auto;
  filter: drop-shadow(0 4px 6px #4733152e);
}

h1 {
  margin: 0;
  padding-inline-start: .13em;
  font: 700 clamp(2.15rem, min(8.7vw, 10.5vh), 5.8rem) / 1 Georgia, serif;
  letter-spacing: .13em;
  text-align: center;
  text-transform: uppercase;
}

.brand::after {
  width: min(66%, 220px);
  height: 1px;
  margin-top: 4px;
  background: linear-gradient(90deg, transparent, var(--bronze), transparent);
  content: "";
}

.phone {
  position: relative;
  width: min(100%, 984px, max(450px, 106vh));
  margin: 0;
  padding: clamp(5px, 1.05vw, 13px) clamp(10px, 2.05vw, 26px);
  border: 1px solid #25241e;
  border-radius: clamp(13px, 3vw, 37px);
  background: linear-gradient(157deg, #7b7364 0%, #2c2925 14%, #10100f 50%, #2b2723 94%);
  box-shadow: inset 0 0 0 1px #b7ac96, inset 0 0 0 3px #312e28,
    0 6px 12px #3323154d, 0 20px 33px -10px #33231573;
}

.phone::before {
  position: absolute;
  top: 50%;
  left: clamp(3px, .7vw, 10px);
  width: clamp(3px, .64vw, 8px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 38%, #626c83 0, #292d37 30%, #0d1017 55%);
  box-shadow: 0 0 0 1px #5e594b;
  transform: translateY(-50%);
  content: "";
}

.phone::after {
  position: absolute;
  top: -3px;
  right: 19%;
  width: 13%;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: #6e6658;
  box-shadow: -10vw 0 0 -0.25px #6e6658;
  content: "";
}

.screen {
  overflow: hidden;
  border: 1px solid #070706;
  border-radius: clamp(7px, 1.9vw, 25px);
  background: #191512;
}

.screen img {
  display: block;
  width: 100%;
  height: auto;
}

.publisher {
  text-align: center;
  font: 0.95rem/1.45 system-ui, sans-serif;
}