:root {
  color-scheme: dark;
  font-family: Georgia, "Times New Roman", serif;
  background: #0d0b0a;
  color: #f3dfad;
}

* { box-sizing: border-box; }
html, body { width:100%; height:100%; margin: 0; overflow:hidden; }
body {
  min-width: 320px;
  background: #0c0a09 url("assets/black-marble.png") center / cover fixed;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 38%, rgba(211, 152, 52, .12), transparent 34%), linear-gradient(rgba(4, 3, 3, .25), rgba(4, 3, 3, .62));
}

main { position: relative; display: grid; width:100%; height:100vh; place-items: center; padding: 16px; }
.inquiry-room {
  position: relative;
  width: min(1100px, calc(100vw - 40px));
  height:min(790px,calc(100vh - 40px));
  aspect-ratio: auto;
  min-height: 0;
  padding: 0;
  border:1px solid rgba(213,163,69,.34);
  background:linear-gradient(145deg,rgba(37,25,18,.96),rgba(13,11,10,.98) 62%,rgba(29,18,12,.97));
  box-shadow:0 30px 75px rgba(0,0,0,.8),inset 0 0 90px rgba(181,104,29,.1);
  text-align: center;
}

.floating-brand { position:fixed; z-index:3; top:30px; left:50%; transform:translateX(-50%); width:max-content; text-align:center; pointer-events:none; }
h1 {
  width: max-content;
  margin: 0;
  color: #d7aa54;
  font-size: clamp(31px, 4vw, 45px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .015em;
  text-shadow: 1px 1px #321505, -1px -1px #ffe2a0, 0 3px 7px #1d0b03;
}
.floating-brand p { margin: 2px 0 0; color:#e0b967; font-size:13px; font-weight:700; letter-spacing:.24em; text-shadow:0 1px 2px #1b0902; text-transform:uppercase; }
.paper-content { position:absolute; inset:22% 10% 4%; display:flex; flex-direction:column; align-items:center; color:#ead9b8; }
.method-line { max-width: 700px; margin: 0 auto; color: #ead9b8; font-size: clamp(15px, 1.8vw, 20px); font-style: italic; line-height: 1.35; }

.wonder-plaque {
  position:absolute;
  z-index:2;
  top:10%; left:20%; right:20%;
  display:grid;
  place-items:center;
  min-height:10%;
  margin:0;
  padding:5px 10px;
  border:2px solid #5c310d;
  outline:1px solid #e6b95e;
  background:linear-gradient(100deg,#75400e,#dfa64b 18%,#b56d1c 52%,#e0a94e 82%,#6f3a0d);
  box-shadow:inset 0 0 0 3px rgba(69,31,7,.35),0 8px 22px rgba(45,20,5,.4);
  color: #321a08;
  text-shadow: 0 1px rgba(255, 235, 174, .65);
}
.wonder-plaque strong { display: block; font-size: clamp(10px, 1.5vw, 17px); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.wonder-plaque small { display: block; margin-top: 2px; font-size: clamp(8px,.8vw,10px); letter-spacing: .1em; text-transform: uppercase; }

.collaboration-emblem { position:relative; width: min(610px, 84%); height:285px; margin: 7px auto 0; padding:0 8px; overflow:hidden; border:0; border-radius:0; outline:1px solid #eee1ab; outline-offset:2px; background:#eee1ab; box-shadow:0 10px 28px rgba(0,0,0,.28); }
.collaboration-emblem img { display: block; width: 100%; height: auto; margin-top:-56px; mix-blend-mode:multiply; filter:saturate(.9) contrast(1.02); }
.collaboration-emblem figcaption { position:absolute; right:8px; bottom:7px; left:8px; margin:0; color: #1c140d; font-size: 11px; font-weight:600; letter-spacing: .05em; }

.coming-soon { margin-top: 5px; color:#f0dfbb; }
.coming-soon span { color: #b99b6b; font-size: 9px; letter-spacing: .17em; text-transform: uppercase; }
.coming-soon h2 { margin: 3px 0 0; color: #f0d49a; font-size: clamp(24px, 3.3vw, 40px); font-weight: 400; line-height:1; letter-spacing: .07em; text-transform: uppercase; }
.coming-soon p { margin: 3px 0 0; color: #ead9b8; font-size: clamp(13px,1.5vw,17px); font-weight:700; letter-spacing: .24em; text-transform: uppercase; }

.fun-fact { display: grid; grid-template-columns: 27px 1fr; gap: 9px; align-items: start; width:100%; margin: 5px auto 0; padding-top: 5px; border-top: 1px solid rgba(211,163,75,.25); color:#ead9b8; text-align: left; }
.info-mark { display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid #bb7a28; border-radius: 50%; color: #efca7b; font-style: italic; }
.fun-fact strong { color: #e7bc68; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.fun-fact p { margin: 2px 0 0; color: #cdbb98; font-size: 11px; line-height: 1.3; }

@media (max-width: 620px) {
  main { padding:4px; }
  .floating-brand { top:10px; left:50%; }
  .inquiry-room { width:calc(100vw - 8px); height:calc(100vh - 8px); }
  .paper-content { inset:22% 7% 3%; }
  .method-line { font-size:12px; }
  .collaboration-emblem { width:76%; }
  .fun-fact { margin-top:5px; }
}

@media (prefers-reduced-motion: no-preference) {
  .collaboration-emblem { animation: reveal 1.2s ease-out both; }
  .coming-soon { animation: reveal 1.2s .2s ease-out both; }
  @keyframes reveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}