:root {
  --deep: #0c0906;
  --wood: #1c140d;
  --wood-light: #2a1d12;
  --bulb-warm: #ffcf7a;
  --text: #f0e6d6;
  --muted: #b7a68d;

  /* enamel plate palette */
  --cream-bg: #eee3ce;
  --cream-text: #2a1d12;
  --navy-bg: #1f3a4d;
  --navy-text: #eee3ce;
  --rust-bg: #6b3a2c;
  --rust-text: #f3e6d4;
  --red-bg: #a53c34;
  --red-text: #f3e6d4;
  --teal-bg: #24534f;
  --teal-text: #eee3ce;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Zen Kaku Gothic New", "Hiragino Sans", sans-serif;
  color: var(--text);
  background: var(--deep);
  overflow-x: hidden;
}

/* ---------- background ---------- */

.bg {
  position: fixed;
  inset: 0;
  z-index: -2;
}

.bg__image {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(180deg, rgba(10, 7, 4, 0.15), rgba(8, 5, 3, 0.3) 55%, rgba(6, 4, 2, 0.55)),
    url("../img/bg-hero.jpg");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-color: var(--wood);
}

.bg__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 90% 60% at 50% 0%, rgba(242, 182, 79, 0.14), transparent 60%),
              radial-gradient(ellipse 140% 90% at 50% 100%, rgba(0, 0, 0, 0.4), transparent 55%);
}

.bg__grain {
  position: absolute;
  inset: 0;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---------- JST clock badge ---------- */

.jst-clock {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5;
  width: var(--clock-size, 76px);
  height: var(--clock-size, 76px);
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.65);
  pointer-events: none;
}

.jst-clock__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.jst-clock__hand {
  position: absolute;
  left: 50%;
  bottom: 50%;
  transform-origin: 50% 100%;
  background: #1a140c;
  border-radius: 2px;
}

.jst-clock__hand--hour {
  width: calc(var(--clock-size, 76px) * 0.04);
  height: calc(var(--clock-size, 76px) * 0.26);
  margin-left: calc(var(--clock-size, 76px) * -0.02);
}

.jst-clock__hand--min {
  width: calc(var(--clock-size, 76px) * 0.026);
  height: calc(var(--clock-size, 76px) * 0.355);
  margin-left: calc(var(--clock-size, 76px) * -0.013);
}

.jst-clock__hand--sec {
  width: calc(var(--clock-size, 76px) * 0.013);
  height: calc(var(--clock-size, 76px) * 0.33);
  margin-left: calc(var(--clock-size, 76px) * -0.0065);
  background: #a53c34;
}

.jst-clock__pin {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--clock-size, 76px) * 0.065);
  height: calc(var(--clock-size, 76px) * 0.065);
  border-radius: 50%;
  background: #1a140c;
  transform: translate(-50%, -50%);
}

/* ---------- layout ---------- */

.page {
  max-width: 560px;
  margin: 0 auto;
  padding: 0 24px 60px;
}

/* ---------- hero ---------- */

.hero {
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-top: 20px;
  position: relative;
}

.awning {
  width: min(94vw, 460px);
  filter:
    drop-shadow(0 3px 10px rgba(0, 0, 0, 0.8))
    drop-shadow(0 0 24px rgba(255, 207, 122, 0.25));
}

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

.hero__eyebrow {
  letter-spacing: 0.4em;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--muted);
  margin: 24px 0 0;
}

.hero__tagline {
  margin: 26px 0 0;
  color: var(--muted);
  font-family: "Shippori Mincho", serif;
  font-weight: 500;
  font-size: clamp(1rem, 2.8vw, 1.2rem);
  line-height: 2;
  letter-spacing: 0.06em;
}

/* ---------- links ---------- */

.links {
  display: flex;
  flex-direction: column;
  gap: 36px;
  padding-top: 20px;
}

.links__group-title {
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 14px 4px;
}

.links__group {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* enamel sign plate */

.card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border-radius: 6px;
  text-decoration: none;
  background: var(--cream-bg);
  color: var(--cream-text);
  border: 3px solid rgba(0, 0, 0, 0.35);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.15),
    0 10px 22px -10px rgba(0, 0, 0, 0.75),
    0 2px 0 rgba(0, 0, 0, 0.3);
  transform: rotate(var(--tilt, -0.6deg));
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

.links__group a:nth-child(4n+1) { --tilt: -0.7deg; }
.links__group a:nth-child(4n+2) { --tilt: 0.5deg; }
.links__group a:nth-child(4n+3) { --tilt: -0.4deg; }
.links__group a:nth-child(4n+4) { --tilt: 0.7deg; }

.card:hover {
  transform: rotate(0deg) translateY(-3px) scale(1.015);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.2),
    0 16px 30px -12px rgba(0, 0, 0, 0.8),
    0 0 22px 2px rgba(255, 207, 122, 0.25);
}

.card--soon {
  opacity: 0.55;
  cursor: default;
  filter: grayscale(0.4);
}

.card--soon:hover {
  transform: rotate(var(--tilt, -0.6deg));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.15),
    0 10px 22px -10px rgba(0, 0, 0, 0.75),
    0 2px 0 rgba(0, 0, 0, 0.3);
}

.card[data-plate="navy"] { background: var(--navy-bg); color: var(--navy-text); }
.card[data-plate="rust"] { background: var(--rust-bg); color: var(--rust-text); }
.card[data-plate="red"]  { background: var(--red-bg);  color: var(--red-text); }
.card[data-plate="teal"] { background: var(--teal-bg); color: var(--teal-text); }

.card__rivet {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.6), rgba(0, 0, 0, 0.5));
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
  opacity: 0.55;
}

.card.is-clicked .card__rivet {
  animation: rivet-glow 0.8s ease-out;
}

@keyframes rivet-glow {
  0% { box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); opacity: 0.55; }
  30% {
    box-shadow: 0 0 6px 3px rgba(255, 207, 122, 0.95), 0 0 1px rgba(0, 0, 0, 0.5);
    opacity: 1;
  }
  100% { box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); opacity: 0.55; }
}

.card__rivet--tl { top: 7px; left: 7px; }
.card__rivet--tr { top: 7px; right: 7px; }
.card__rivet--bl { bottom: 7px; left: 7px; }
.card__rivet--br { bottom: 7px; right: 7px; }

.card__icon {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.1);
  color: currentColor;
}

.card__icon svg { width: 22px; height: 22px; }

.card__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.card__title {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 900;
  font-size: 15px;
  letter-spacing: 0.02em;
}

.card__sub {
  font-size: 12px;
  opacity: 0.75;
}

.card__arrow {
  opacity: 0.6;
  transition: transform 0.25s ease;
}

.card:hover .card__arrow {
  transform: translateX(4px);
}

.card__icon--vinyl {
  background: none;
}

.vinyl {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle at 50% 50%,
      #0c0c0c 0px, #0c0c0c 1.4px,
      #2b2b2b 1.4px, #2b2b2b 2.8px);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    0 2px 5px rgba(0, 0, 0, 0.6);
  animation: vinyl-spin 3.6s linear infinite;
}

.vinyl__label {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--bulb-warm);
  box-shadow: 0 0 0 2px #0c0c0c, 0 0 6px rgba(255, 207, 122, 0.6);
}

.vinyl__label::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #0c0c0c;
}

@keyframes vinyl-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .vinyl { animation: none; }
}

.card.is-hidden {
  opacity: 0;
  transform: translateY(14px) rotate(var(--tilt, -0.6deg));
}

.card.is-visible {
  animation: card-in 0.6s ease forwards;
}

@keyframes card-in {
  to { opacity: 1; transform: translateY(0) rotate(var(--tilt, -0.6deg)); }
}

/* ---------- footer ---------- */

.footer {
  text-align: center;
  margin-top: 64px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.1em;
}

.br-mobile { display: none; }

@media (max-width: 480px) {
  .br-mobile { display: inline; }
}