:root {
  color-scheme: dark;
  --paper: #f4efe5;
  --ink: #f8f4ed;
  --muted: #c7c9bf;
  --soft: #aeb5aa;
  --accent: #d6ad68;
  --deep: #162225;
  --line: rgba(244, 239, 229, .22);
  --panel: rgba(16, 29, 31, .82);
  --serif: Georgia, "Times New Roman", serif;
  --sans: "Trebuchet MS", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { min-width: 320px; min-height: 100%; background: var(--deep); }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background-color: var(--deep);
  background-image: url("background01.jpg");
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  font-family: var(--serif);
}


body::before {
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(
      115deg,
      rgba(7, 18, 20, .55) 0%,
      rgba(12, 27, 29, .35) 52%,
      rgba(20, 27, 25, .18) 100%
    ),
    radial-gradient(circle at 78% 20%, rgba(212, 172, 102, .12), transparent 32rem);
  content: "";
  pointer-events: none;
}

.page-shell {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: 100vh;
  padding: clamp(1rem, 4vw, 3.75rem);
  place-items: center;
}

.notice-card {
  position: relative;
  width: min(100%, 58rem);
  padding: clamp(1.5rem, 5vw, 3.75rem) clamp(1.4rem, 7vw, 6.25rem);
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--panel);
  box-shadow: 0 1.75rem 5rem rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255,255,255,.025);
  backdrop-filter: blur(9px);
  overflow: hidden;
  animation: rise-in .8s ease both;
}

.notice-card::before,
.notice-card::after {
  position: absolute;
  width: 4.5rem;
  height: 4.5rem;
  border-color: rgba(214, 173, 104, .72);
  border-style: solid;
  content: "";
  pointer-events: none;
}
.notice-card::before { top: 1.2rem; right: 1.2rem; border-width: 1px 1px 0 0; }
.notice-card::after { bottom: 1.2rem; left: 1.2rem; border-width: 0 0 1px 1px; }


.site-header {
  width: 100%;
}

.logo-link {
  display: block;
  width: 100%;
}

.site-logo {
  display: block;
  width: 100%;
  height: auto;
}

.header-note { color: var(--soft); font: 600 .68rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.accent-line { width: 3.3rem; height: 1px; margin: clamp(2.1rem, 5vw, 4rem) 0 1.8rem; background: var(--accent); }
.content { max-width: 43rem; }
.eyebrow { display: flex; align-items: center; gap: .6rem; margin: 0 0 1.25rem; color: var(--accent); font: 600 .7rem/1.2 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.status-dot { width: .48rem; height: .48rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 .24rem rgba(214, 173, 104, .13); }
h1 { max-width: 12ch; margin: 0; color: var(--paper); font-size: clamp(3.1rem, 8vw, 6rem); font-weight: 400; letter-spacing: -.055em; line-height: .92; }
h1 em { color: var(--accent); font-style: italic; }
.intro { max-width: 38rem; margin: 2rem 0 0; color: var(--muted); font-size: clamp(1.02rem, 1.5vw, 1.2rem); line-height: 1.65; }
.intro strong { color: var(--paper); font-weight: 400; }
.details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; margin-top: 2.8rem; padding-top: 1.45rem; border-top: 1px solid var(--line); }
.detail-item { display: grid; gap: .45rem; }
.detail-label, .contact-link small { color: var(--soft); font: 600 .63rem/1.2 var(--sans); letter-spacing: .15em; text-transform: uppercase; }
.detail-value { color: var(--paper); font-size: 1.08rem; }
.contact-row { display: flex; flex-wrap: wrap; gap: .85rem 2.5rem; margin-top: 2.5rem; }
.contact-link { display: inline-flex; align-items: center; gap: .8rem; color: var(--paper); text-decoration: none; transition: color .2s ease, transform .2s ease; }
.contact-link:hover, .contact-link:focus-visible { color: var(--accent); transform: translateY(-2px); }
.contact-link > span:last-child { display: grid; gap: .25rem; }
.contact-icon { display: grid; width: 2.15rem; height: 2.15rem; border: 1px solid rgba(214, 173, 104, .65); border-radius: 50%; color: var(--accent); font: 1rem/1 var(--serif); place-items: center; }
.site-footer { display: flex; gap: .65rem; margin-top: clamp(3.2rem, 7vw, 5.5rem); color: var(--soft); font: .68rem/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.footer-separator { color: var(--accent); }

@keyframes rise-in { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 600px) {
  .page-shell { padding: .8rem; }
  .notice-card { padding: 2rem 1.25rem; }
  .notice-card::before, .notice-card::after { width: 2.6rem; height: 2.6rem; }
  .notice-card::before { top: .7rem; right: .7rem; }
  .notice-card::after { bottom: .7rem; left: .7rem; }
  .header-note { display: none; }
  .site-logo { max-height: 2.8rem; }
  .accent-line { margin-top: 2.4rem; }
  .details { grid-template-columns: 1fr; gap: 1.25rem; }
  .contact-row { display: grid; gap: 1rem; }
  .site-footer { margin-top: 3rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}