/* =======================================================================
   CHICKEN VALET
   Gold on black, but the expense comes from restraint: one accent, a lot
   of empty space, and type set small and wide rather than large and loud.
   Edit freely — the CSP uses style-src 'self', there is no hash to keep.
   ======================================================================= */

:root{
  --black:#0A0A0C;
  --ink:#08070A;
  --gold:#C9A961;
  --gold-lo:#8A7038;
  --gold-hi:#F0DFA8;
  --cream:#EFE7D6;

  --display:'Bodoni Moda',Didot,'Times New Roman',serif;
  --util:'Jost','Futura',Avenir,'Helvetica Neue',sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{ height:100%; }

body{
  margin:0;
  background:var(--ink);
  color:var(--cream);
  font-family:var(--util);
  -webkit-font-smoothing:antialiased;
}

/* Pooled light from above, the way a room like this is actually lit. */
.stage{
  min-height:100%;
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:48px 24px;
  background:
    radial-gradient(120% 78% at 50% -8%, #1A160F 0%, #0C0B0D 46%, var(--ink) 100%);
}

/* Hairline gold frame, inset — the members'-card device. */
.card{
  position:relative;
  width:min(560px,100%);
  padding:clamp(48px,7vw,74px) clamp(28px,5vw,58px) clamp(42px,6vw,62px);
  text-align:center;
  border:1px solid rgba(201,169,97,.30);
  outline:1px solid rgba(201,169,97,.10);
  outline-offset:9px;
}
/* Corner ticks, so the frame reads as engraved rather than as a CSS box. */
.card::before,.card::after{
  content:'';
  position:absolute;
  width:15px; height:15px;
  border:1px solid rgba(201,169,97,.55);
}
.card::before{ top:-1px; left:-1px; border-right:0; border-bottom:0; }
.card::after{ bottom:-1px; right:-1px; border-left:0; border-top:0; }

.est{
  margin:0 0 34px;
  font-size:.6rem;
  font-weight:300;
  letter-spacing:.42em;
  text-indent:.42em;          /* balances the trailing letterspace */
  text-transform:uppercase;
  color:var(--gold-lo);
}

.crest{
  display:block;
  width:clamp(132px,25vw,168px);
  height:auto;
  margin:0 auto 30px;
}

/* The one large thing on the page. Didone at size, letterspaced open. */
.name{
  margin:0;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2.5rem,8.4vw,4.1rem);
  line-height:1.02;
  letter-spacing:.055em;
  text-indent:.055em;
  color:var(--cream);
  background:linear-gradient(176deg,var(--gold-hi) 6%,var(--gold) 44%,var(--gold-lo) 96%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
/* If a browser cannot clip the gradient to the glyphs, fall back to solid
   gold rather than to invisible text. */
@supports not ((background-clip:text) or (-webkit-background-clip:text)){
  .name{ color:var(--gold); background:none; }
}

.rule{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  margin:30px auto 28px;
  max-width:230px;
}
.rule span{
  flex:1;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(201,169,97,.65),transparent);
}
.rule i{
  font-style:normal;
  font-size:.7rem;
  color:var(--gold);
}

.tag{
  margin:0 0 11px;
  font-size:.68rem;
  font-weight:300;
  letter-spacing:.34em;
  text-indent:.34em;
  text-transform:uppercase;
  color:rgba(239,231,214,.72);
}

.hours{
  margin:0;
  font-family:var(--display);
  font-style:italic;
  font-size:1rem;
  letter-spacing:.02em;
  color:var(--gold-lo);
}

/* A slow breath of light across the emblem. Barely there on purpose —
   anything faster reads as a banner ad rather than a room. */
@media (prefers-reduced-motion:no-preference){
  .crest{ animation:sheen 7s ease-in-out infinite alternate; }
  @keyframes sheen{
    from{ opacity:.80; }
    to  { opacity:1; }
  }
}

@media (max-width:420px){
  .card{ border-width:1px; outline-offset:6px; }
  .est{ letter-spacing:.3em; text-indent:.3em; }
  .tag{ letter-spacing:.26em; text-indent:.26em; }
}