@font-face { font-family: "Libre Baskerville"; src: url("fonts/libre-baskerville-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Fira Sans"; src: url("fonts/fira-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Silkscreen"; src: url("fonts/silkscreen-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }

/* The card is laid out on the 941 × 1672 grid of the reference art:
   1 --u is one pixel of that grid, so everything scales with the card. */
:root {
  --ink: #10242b;
  --teal: #1f5866;
  --cream: #f8eed9;
  --cream-2: #f1e2c3;
  --gold: #c8912e;
  --gold-hi: #e9bd57;
  --badge: #f5c63d;
  color-scheme: light;
}

* { box-sizing: border-box; }

html { background: #4fb3e0; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px 0;
}

.card {
  container-type: inline-size;
  position: relative;
  width: min(100vw, 480px);
  aspect-ratio: 941 / 1672;
  background: linear-gradient(#56bce8, #63c7f0 70%, #6ccbf1);
  box-shadow: 0 20px 60px rgba(16, 36, 43, .25);
  overflow: hidden;
}
.card > * { --u: calc(100cqw / 941); }
.card::after {               /* thin gold frame */
  content: "";
  position: absolute;
  inset: calc(100cqw / 941 * 12);
  border: calc(100cqw / 941 * 3) solid var(--gold-hi);
  pointer-events: none;
  z-index: 3;
}

.scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;                /* the cloth on the sill hangs over the plaque */
}

/* notched pixel corners shared by plaque, badge and buttons */
.plaque, .link, .badge {
  --n: calc(var(--u) * 10);
  clip-path: polygon(var(--n) 0, calc(100% - var(--n)) 0, calc(100% - var(--n)) var(--n), 100% var(--n),
                     100% calc(100% - var(--n)), calc(100% - var(--n)) calc(100% - var(--n)), calc(100% - var(--n)) 100%,
                     var(--n) 100%, var(--n) calc(100% - var(--n)), 0 calc(100% - var(--n)), 0 var(--n), var(--n) var(--n));
}

.plaque {
  position: absolute;
  left: calc(var(--u) * 198);
  top: calc(var(--u) * 630);
  width: calc(var(--u) * 544);
  height: calc(var(--u) * 200);
  background: var(--gold);
  padding: calc(var(--u) * 6);
  z-index: 1;
}
.plaque h1 {
  --n: calc(var(--u) * 8);
  margin: 0;
  height: 100%;
  display: grid;
  place-items: center;
  background: linear-gradient(var(--cream), var(--cream-2));
  box-shadow: inset 0 0 0 calc(var(--u) * 4) var(--cream), inset 0 0 0 calc(var(--u) * 6) var(--gold-hi);
  font: 700 calc(var(--u) * 70)/1.08 "Libre Baskerville", Georgia, serif;
  color: var(--ink);
  text-align: center;
  clip-path: inherit;
}

.badge-row {
  position: absolute;
  margin: 0;
  left: calc(var(--u) * 222);
  width: calc(var(--u) * 496);
  top: calc(var(--u) * 858);
  height: calc(var(--u) * 58);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 14);
}
.badge-row::before, .badge-row::after {   /* gold lines with a sparkle */
  content: "";
  flex: 1;
  height: calc(var(--u) * 3);
  background: var(--gold-hi);
}
.badge {
  --n: calc(var(--u) * 7);
  background: var(--badge);
  padding: calc(var(--u) * 8) calc(var(--u) * 34);
  box-shadow: inset 0 0 0 calc(var(--u) * 4) #a8741a;
  font: 400 calc(var(--u) * 34)/1.2 "Silkscreen", ui-monospace, monospace;
  letter-spacing: calc(var(--u) * 3);
  color: var(--ink);
  text-transform: uppercase;
}

.link {
  position: absolute;
  left: calc(var(--u) * 108);
  top: calc(var(--u) * var(--top));
  width: calc(var(--u) * 724);
  height: calc(var(--u) * 120);
  display: flex;
  align-items: center;
  padding: 0 calc(var(--u) * 46) 0 calc(var(--u) * 56);
  gap: calc(var(--u) * 28);
  background: var(--gold);
  color: var(--ink);
  text-decoration: none;
  z-index: 1;
  transition: transform .1s, filter .1s;
}
.link::before {             /* cream face inside the gold rim */
  content: "";
  position: absolute;
  inset: calc(var(--u) * 6);
  background: linear-gradient(var(--cream), var(--cream-2));
  box-shadow: inset 0 0 0 calc(var(--u) * 4) var(--cream), inset 0 0 0 calc(var(--u) * 6) var(--gold-hi);
  z-index: -1;
}
.link::after {
  content: "→";
  margin-left: auto;
  font: 600 calc(var(--u) * 46)/1 "Fira Sans", system-ui, sans-serif;
  color: var(--teal);
}
.icon {
  width: calc(var(--u) * 64);
  height: calc(var(--u) * 64);
  flex: none;
}
.pixel { image-rendering: pixelated; }
.label {
  font: 600 calc(var(--u) * 36)/1 "Fira Sans", system-ui, sans-serif;
  padding-left: calc(var(--u) * 26);
  border-left: calc(var(--u) * 4) solid var(--teal);
  min-width: 0;
  white-space: nowrap;
}
.link:hover { transform: translateY(calc(var(--u) * -4)); filter: brightness(1.04); }
.link:active { transform: translateY(calc(var(--u) * 2)); }
.link:focus-visible { outline: 3px solid var(--ink); outline-offset: -8px; }

@media (max-width: 480px) {
  body { padding: 0; align-items: flex-start; }
  .card { box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { .link { transition: none; } }