body{margin:0;background:#071820;color:#fff;font-family:system-ui}

/* ---------- Layout ---------- */
.home{
  min-height:100svh;
  display:flex;
  justify-content:center;
}

.home-wrap{
  width:min(520px,calc(100vw - 28px));
  min-height:100svh;
  display:grid;
  grid-template-rows: 1fr auto;
  justify-items:center;
  align-content:center;
  row-gap:16px;
  padding:18px 0 22px;
}

/* ---------- Card Frame ---------- */
/* IMPORTANT:
   The frame must be taller than the inner content.
   We do this by fixing the card height and INSETTING the inner panel.
*/
.tc-card{
  --frame-pad:18px;
  /* Keep height logic, but let width be derived from aspect-ratio */
  aspect-ratio:5/7;
  height:min(820px, calc(100svh - 120px)); /* taller frame */
  width:auto;
  max-width:100%;

  padding:var(--frame-pad); /* frame thickness */
  border-radius:34px;
  background:linear-gradient(#d9b45b,#b48a33);
  box-sizing:border-box;
}

/* ---------- Inner Panel ---------- */
.tc-inner{
  --inner-pad:18px;
  width:100%;
  height:100%;
  border-radius:24px;
  padding:var(--inner-pad);
  display:grid;
  grid-template-rows: 9% 56% calc(var(--frame-pad) + var(--inner-pad)) 1fr calc((var(--frame-pad) + var(--inner-pad)) / 2) auto;
  gap:0;
  background:linear-gradient(#1a2a33,#0b141a);
  box-sizing:border-box;
}

/* ---------- Header ---------- */
.tc-header{
  height:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.tc-title{
  font-weight:900;
  letter-spacing:.22em;
  font-size:clamp(16px,3.8vw,20px);
}

.tc-badge{
  font-size:clamp(10px,2.7vw,12px);
  padding:6px 10px;
  border:1px solid #fff3;
  border-radius:999px;
}

/* ---------- Media ---------- */
.tc-media{
  height:100%;
  border:1px solid #fff3;
  border-radius:18px;
  display:grid;
  place-items:center;
  min-height:220px;
}

.tc-media-label{
  opacity:.7;
  letter-spacing:.25em;
}


/* ---------- Separators ---------- */
.tc-sep{
  width:100%;
  border-radius:18px;
}
.tc-sep--main{
  height:100%;
}
.tc-sep--mini{
  height:100%;
  border:1px solid #fff3;
  border-radius:18px;
  opacity:.85;
}

/* ---------- Meta ---------- */
.tc-info{
  height:100%;
  border:1px solid #fff3;
  border-radius:18px;
  padding:12px;
  display:grid;
  grid-template-rows: 1fr auto;
  gap:10px;
}

.tc-stripe{
  height:12px;
  background:repeating-linear-gradient(90deg,#fff3 0 10px,#0000 10px 22px);
}

.tc-motto{
  text-align:center;
  font-weight:700;
  font-size:clamp(13px,3.6vw,16px);
  line-height:1.2;
}

.tc-footer{
  padding-top:2px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.tc-contact-label{
  font-size:11px;
  letter-spacing:.22em;
}

.tc-contact-pill{
  padding:7px 10px;
  border-radius:14px;
  border:1px solid #fff3;
  color:#fff;
  text-decoration:none;
}

.tc-barcode{
  height:12px;
  background:repeating-linear-gradient(90deg,#000 0 6px,#0000 6px 14px);
  opacity:.55;
}

/* ---------- Nav ---------- */
.home-nav{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
}

.home-link{
  padding:8px 12px;
  border-radius:999px;
  border:1px solid #fff3;
  color:#fff;
  text-decoration:none;
}

/* ---------- Mobile ---------- */
@media (max-width:420px){
  .home-wrap{
    width:calc(100vw - 18px);
    padding:14px 0 18px;
    row-gap:14px;
  }

  .tc-card{
  --frame-pad:18px;
    aspect-ratio:5/7;
    height: calc(100svh - 110px);
    width:auto;
    max-width:100%;
    padding:14px; /* still a visible frame */
    border-radius:30px;
  }

  .tc-inner{
  --inner-pad:18px;
    padding:14px;
    border-radius:22px;
    gap:14px;
  }

  .tc-media{
    min-height:180px;
  }
}

.tc-info .tc-barcoderow{align-self:end;}