:root {
  --ink:    #3e3526;   
  --ink-vi: #5e5138;   
  
  --wine:   #af3e31;   
  --gold:   #b78d35;   
  --card:   #fdfaf1;   
  --tint:   #f7f0dc;   
}

* { box-sizing: border-box; }
html { font-size: 16px; }               

body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(135% 100% at 50% 0, #5b4a33, #241a0d 78%);
  display: flex;
  flex-direction: column;                
  justify-content: flex-start;
  align-items: center;
  padding: .9rem .7rem 1.1rem;
  font-family: "EB Garamond", Georgia, serif;
  color: var(--ink);
}


.card {
  position: relative;
  width: 100%;
  max-width: 27rem;
  background: var(--card);
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(40, 28, 6, .55);
  text-align: center;
  padding-bottom: 1.3rem;
}
.card.ftb { padding-bottom: 0; }        


.card, .credit { opacity: 0; transition: opacity .22s ease; }
.revealed .card, .revealed .credit { opacity: 1; }


.banner { position: relative; line-height: 0; z-index: 2; }
.banner img {
  width: 100%;
  height: 12.5rem;
  object-fit: cover;
  object-position: 50% 14%;             
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 68%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0, #000 68%, transparent 100%);
}

.inner { position: relative; z-index: 2; padding: 0 1.5rem; }


.greeting { font-weight: 600; font-size: 1.76rem; line-height: 1.1; margin: .35rem 0 0; }



.sepchip .rbg,
.qplate  .rbg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; overflow: visible; }
.sepchip .rbg { filter: drop-shadow(0 1.5px 4px rgba(70, 45, 12, .13)); }
.qplate  .rbg { filter: drop-shadow(0 3px 10px  rgba(60, 40, 10, .14)); }


.sepchip {
  position: relative;
  display: inline-block;
  margin: .68rem 0 0;                    
  padding: .34rem 1.5rem .36rem;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: .63rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--wine);
  line-height: 1.25;
}
.sepchip .rcontent {
  position: relative; z-index: 1;
  display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 1rem;
}
.sepchip .chip-col { display: inline-flex; flex-direction: column; gap: .22rem; align-items: stretch; }
.sepchip .chip-date {
  display: flex; align-items: center; justify-content: space-between; gap: .4rem; width: 100%;
  font-size: .6rem; letter-spacing: .12em; color: #8d7f5e; font-weight: 700; text-transform: uppercase;
}
.sepchip .chip-date .wx { font-size: 1em; letter-spacing: 0; }
.sepchip .chip-thought { display: block; white-space: nowrap; text-align: center; }
.sepchip .chip-thought .tw { font-weight: 800; color: var(--gold); }   
.sepchip .fl { color: var(--gold); display: inline-flex; align-items: center; justify-content: center; line-height: 0; flex: 0 0 auto; }


.qplate {
  position: relative;
  margin-top: .68rem;                    
  padding: .65rem 1rem .7rem;
  text-align: center;
}
.qplate .rcontent { position: relative; z-index: 1; display: block; }

.verse {
  font-family: "Source Serif 4", Georgia, serif;
  font-weight: 600;
  font-size: 1.34rem;
  line-height: 1.54;
  margin: .15rem 0 0;
}
.cross { margin: .95rem 0; display: flex; align-items: center; justify-content: center; gap: .7rem; line-height: 0; }
.cross .line { flex: 0 0 2.3rem; height: 1px; background: linear-gradient(to right, transparent, var(--gold)); }
.cross .line:last-child { background: linear-gradient(to left, transparent, var(--gold)); }
.vi { font-size: 1.04rem; line-height: 1.58; color: var(--ink-vi); margin: 0; }
.ref { font-style: italic; font-weight: 600; color: var(--wine); text-align: right; margin: .75rem 0 0; font-size: 1rem; }
.ref::before { content: "\2014  "; }
.vi[hidden], .cross[hidden] { display: none; }


.skyfoot { display: block; width: 100%; margin-top: .8rem; line-height: 0; position: relative; z-index: 2; }


.credit {
  width: 100%;
  max-width: 27rem;
  text-align: center;
  margin: 10px 0 2px;                    
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 11px;                       
  letter-spacing: .16em;
  text-transform: uppercase;
}
.credit a {
  color: var(--gold);
  opacity: .48;
  text-decoration: none;
  transition: opacity .2s ease;
}
.credit a:hover,
.credit a:focus { opacity: .82; text-decoration: underline; text-underline-offset: 3px; }



@media (max-width: 599.98px) {
  body::before { content: ""; flex: 1 1 0; }
  body::after  { content: ""; flex: 3 1 0; }
}