/* ============================================================
   EPHEMERA — a museum of images that refuse to stay
   Palette: darkroom brown-black, bone, copper
   Type: Cormorant Garamond (plaques) + Fragment Mono (catalog)
   ============================================================ */

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorantgaramond-roman-300.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorantgaramond-italic-300.woff2') format('woff2');
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorantgaramond-roman-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorantgaramond-italic-400.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Fragment Mono';
  src: url('../fonts/fragmentmono-roman-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Fragment Mono';
  src: url('../fonts/fragmentmono-italic-400.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}

:root {
  --bg: #0d0a07;
  --bone: #ede3d2;
  --bone-soft: rgba(237, 227, 210, 0.66);
  --bone-ghost: rgba(237, 227, 210, 0.38);
  --copper: #c88a5e;
  --copper-soft: rgba(200, 138, 94, 0.55);
  --hairline: rgba(237, 227, 210, 0.16);
  --serif: 'Cormorant Garamond', 'Times New Roman', serif;
  --mono: 'Fragment Mono', ui-monospace, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--bone);
  font-family: var(--serif);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: rgba(200, 138, 94, 0.45); color: #0d0a07; }

#stage { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

.halo {
  position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(ellipse 62% 54% at 50% 46%, rgba(200, 138, 94, 0.055) 0%, transparent 60%);
}
.vignette {
  position: fixed; inset: 0; pointer-events: none; z-index: 2;
  background: radial-gradient(ellipse 120% 105% at 50% 45%, transparent 55%, rgba(4, 3, 2, 0.7) 100%);
}
.grain {
  position: fixed; inset: -60px; pointer-events: none; z-index: 3; opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-shift 1.6s steps(4) infinite;
}
@keyframes grain-shift {
  0% { transform: translate(0, 0); } 25% { transform: translate(-18px, 12px); }
  50% { transform: translate(12px, -16px); } 75% { transform: translate(-6px, -10px); }
  100% { transform: translate(0, 0); }
}

/* ---------- chrome ---------- */

.masthead {
  position: fixed; top: 30px; left: 38px; z-index: 10; user-select: none;
}
.masthead .word {
  font-family: var(--serif); font-weight: 300; font-size: 21px;
  letter-spacing: 0.42em; text-transform: uppercase; color: var(--bone);
  text-decoration: none;
}
.masthead .hall {
  margin-top: 5px; font-family: var(--mono); font-size: 8.5px;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--bone-ghost);
}

.topnav { position: fixed; top: 34px; right: 38px; z-index: 10; display: flex; gap: 24px; }
.topnav a {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--bone-soft); text-decoration: none;
  border-bottom: 1px solid transparent; padding-bottom: 3px;
  transition: color .4s, border-color .4s;
}
.topnav a:hover, .topnav a:focus-visible { color: var(--copper); border-color: var(--copper-soft); outline: none; }

.instruction {
  position: fixed; bottom: 34px; left: 50%; transform: translateX(-50%);
  z-index: 10; font-family: var(--mono); font-size: 9px; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--bone-ghost); text-align: center;
  transition: opacity 1.2s ease; white-space: nowrap;
}
.instruction em { color: var(--copper); font-style: normal; }
body.instructed .instruction { opacity: 0; }

/* ---------- plaque ---------- */

.plaque {
  position: fixed; left: 38px; bottom: 44px; z-index: 10;
  max-width: 340px; user-select: none;
}
.plaque .no {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.3em;
  color: var(--copper); text-transform: uppercase; margin-bottom: 14px;
  display: flex; align-items: center; gap: 12px;
}
.plaque .no::after { content: ''; flex: 0 0 44px; height: 1px; background: var(--copper-soft); }
.plaque h2 {
  font-weight: 500; font-size: clamp(1.9rem, 3.1vw, 2.7rem);
  line-height: 1.04; letter-spacing: 0.02em; text-transform: uppercase;
}
.plaque .caption {
  margin-top: 12px; font-style: italic; font-weight: 400;
  font-size: clamp(1.02rem, 1.35vw, 1.18rem); line-height: 1.5; color: var(--bone-soft);
}
.plaque .materials {
  margin-top: 16px; font-family: var(--mono); font-size: 8.5px;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--bone-ghost);
}

/* ---------- catalog nav ---------- */

.catalog {
  position: fixed; right: 38px; bottom: 44px; z-index: 10;
  display: flex; align-items: center; gap: 22px; user-select: none;
}
.catalog .idx { display: flex; gap: 14px; }
.catalog .dot {
  position: relative; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid transparent; background: none; cursor: pointer;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em;
  color: var(--bone-ghost); transition: color .4s;
}
.catalog .dot:hover { color: var(--bone); }
.catalog .dot[aria-current="true"] { color: var(--copper); }
.catalog .dot svg { position: absolute; inset: -1px; transform: rotate(-90deg); }
.catalog .dot svg circle {
  fill: none; stroke: var(--copper); stroke-width: 1.5;
  stroke-dasharray: 100.53; stroke-dashoffset: 100.53;
}
.catalog .arrows { display: flex; gap: 10px; }
.catalog .arrow {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--hairline); background: none; cursor: pointer;
  color: var(--bone-soft); display: grid; place-items: center;
  transition: all .45s cubic-bezier(.16,1,.3,1);
}
.catalog .arrow:hover, .catalog .arrow:focus-visible {
  border-color: var(--copper); color: var(--copper);
  box-shadow: 0 0 22px rgba(200, 138, 94, 0.22); outline: none;
}
.catalog .arrow svg { display: block; }

/* ---------- intro gate ---------- */

#gate {
  position: fixed; inset: 0; z-index: 50; background: var(--bg);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 3.4vh; text-align: center; padding: 0 6vw;
}
#gate .series {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.4em;
  text-transform: uppercase; color: var(--copper);
}
#gate h1 {
  font-weight: 300; font-size: clamp(3.4rem, 11vw, 8.4rem);
  letter-spacing: 0.3em; text-transform: uppercase; line-height: 1;
  padding-left: 0.3em; /* optically recenter tracked type */
}
#gate .dek {
  font-style: italic; font-weight: 300; font-size: clamp(1.15rem, 2vw, 1.5rem);
  color: var(--bone-soft); max-width: 34em; line-height: 1.6;
}
#gate .enter {
  margin-top: 2vh; font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--bone);
  background: none; border: 1px solid rgba(237, 227, 210, 0.3);
  border-radius: 999px; padding: 17px 44px; cursor: pointer;
  transition: all .5s cubic-bezier(.16,1,.3,1);
}
#gate .enter:hover, #gate .enter:focus-visible {
  border-color: var(--copper); color: var(--copper);
  box-shadow: 0 0 34px rgba(200, 138, 94, 0.25), inset 0 0 16px rgba(200, 138, 94, 0.08);
  outline: none;
}
#gate .enter[disabled] { opacity: 0.45; cursor: wait; }
#gate .loadline {
  font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--bone-ghost);
}

/* ---------- toast (you let it go) ---------- */

.toast {
  position: fixed; top: 14vh; left: 50%; transform: translateX(-50%);
  z-index: 12; font-style: italic; font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  color: var(--bone-soft); opacity: 0; pointer-events: none; white-space: nowrap;
}

/* ---------- responsive ---------- */

@media (max-width: 540px) {
  #gate h1 { font-size: clamp(2rem, 12vw, 2.9rem); letter-spacing: 0.2em; padding-left: 0.2em; }
  #gate .dek { font-size: 1.02rem; }
}

@media (max-width: 860px) {
  .masthead { left: 22px; top: 22px; }
  .masthead .word { font-size: 17px; }
  .topnav { right: 22px; top: 24px; gap: 14px; }
  .plaque { left: 22px; bottom: 108px; max-width: 78vw; }
  .plaque h2 { font-size: clamp(1.5rem, 6.2vw, 2rem); }
  .catalog { right: auto; left: 22px; bottom: 30px; gap: 14px; }
  .instruction { display: none; }
}

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

noscript .ns {
  position: fixed; inset: 0; z-index: 100; background: var(--bg);
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-family: var(--mono); font-size: 12px; letter-spacing: .12em; color: var(--bone-soft); padding: 24px;
}