/* Twelve Weeks of Christmas — postage-stamp gift shelf (Nov 2026)
   Used on christmas.html and on the homepage band. */

.xm{background:linear-gradient(170deg,#1f4d3a 0%,#183d2e 100%);color:#f3e9d2;border-top:5px solid #a3242b;border-bottom:5px solid #a3242b;padding:56px 0 64px;position:relative}
.xm .corner-label{color:#c9a24a;letter-spacing:.12em}
.xm h1,.xm h2{font-family:'Libre Caslon Display',Georgia,serif;font-weight:400;color:#fff;line-height:1.12;margin:6px 0 14px}
.xm h1{font-size:clamp(2.2rem,5vw,3.4rem)}
.xm h2{font-size:clamp(1.9rem,3.6vw,2.7rem)}
.xm-flourish{color:#c9a24a;letter-spacing:.4em;font-size:.95rem;margin:0 0 6px}
.xm-intro{text-align:center;max-width:62ch;margin:0 auto 40px}
.xm-intro p{color:#f3e9d2;margin:0 auto 12px;font-size:1.08rem}
.xm-intro a{color:#f0d58c}

/* The stamp sheet */
.stamp-sheet{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:40px 30px}
.stamp-item{display:flex;flex-direction:column;align-items:center;text-align:center}

.stamp{--holes:#1c4535;position:relative;display:block;width:100%;max-width:210px;padding:13px;color:inherit;text-decoration:none;
  /* perforated edge: little half-circle "holes" along each side, in the background green */
  background:
    radial-gradient(circle at 7px 0,var(--holes) 4.5px,transparent 5px) left top/14px 14px repeat-x,
    radial-gradient(circle at 7px 14px,var(--holes) 4.5px,transparent 5px) left bottom/14px 14px repeat-x,
    radial-gradient(circle at 0 7px,var(--holes) 4.5px,transparent 5px) left top/14px 14px repeat-y,
    radial-gradient(circle at 14px 7px,var(--holes) 4.5px,transparent 5px) right top/14px 14px repeat-y,
    #fffaf0;
  box-shadow:0 8px 14px -6px rgba(0,0,0,.35);transition:transform .2s ease}
.stamp-item:nth-child(odd) .stamp{transform:rotate(-2deg)}
.stamp-item:nth-child(even) .stamp{transform:rotate(1.6deg)}
a.stamp:hover,a.stamp:focus-visible{transform:rotate(0) translateY(-4px) scale(1.03)}
.stamp-frame{display:block;border:2px solid #a3242b;padding:6px;background:#fffaf0}
.stamp-art{display:block;aspect-ratio:2/3;background:#efe4cc;overflow:hidden}
.stamp-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
.stamp-foot{display:flex;justify-content:space-between;align-items:baseline;gap:6px;padding:7px 2px 0;font-family:'Karla',sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#a3242b}
.stamp-foot .denom{font-family:'Libre Caslon Display',Georgia,serif;font-size:1.05rem;letter-spacing:0;text-transform:none;color:#1f4d3a}

/* round postmark over the corner */
.postmark{position:absolute;top:2px;right:-4px;width:64px;height:64px;border-radius:50%;border:2px solid rgba(31,77,58,.85);background:rgba(255,250,240,.82);color:#1f4d3a;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:'Karla',sans-serif;font-weight:700;line-height:1;transform:rotate(12deg);box-shadow:inset 0 0 0 3px rgba(255,250,240,.82),inset 0 0 0 4px rgba(31,77,58,.55)}
.postmark small{font-size:.55rem;letter-spacing:.14em;text-transform:uppercase}
.postmark b{font-family:'Libre Caslon Display',Georgia,serif;font-weight:400;font-size:1.5rem;margin-top:2px}

.stamp-item h3{font-family:'Libre Caslon Display',Georgia,serif;font-weight:400;font-size:1.22rem;line-height:1.2;color:#fff;margin:22px 0 4px}
.stamp-item .kind{font-style:italic;color:#e3d6b8;font-size:.98rem;margin:0 0 12px;max-width:26ch}
.xm-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 20px;background:#a3242b;border:1px solid #a3242b;color:#fff;font-family:'Karla',sans-serif;font-weight:700;font-size:.92rem;letter-spacing:.03em;text-decoration:none;border-radius:3px;box-shadow:3px 3px 0 rgba(0,0,0,.2)}
.xm-btn:hover{background:#7f1b21;border-color:#7f1b21;color:#fff}
.xm-btn.ghost{background:transparent;border-color:#c9a24a;color:#f0d58c;box-shadow:none}
.xm-btn.ghost:hover{background:rgba(201,162,74,.12)}
.xm-new{display:inline-block;background:#c9a24a;color:#1f2a20;font-family:'Karla',sans-serif;font-weight:700;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;padding:3px 9px;border-radius:2px;margin-top:16px}

/* not-yet-opened weeks */
.stamp.sealed{cursor:default}
.stamp.sealed .stamp-art{display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(135deg,#f3ead6 0 10px,#ece0c6 10px 20px)}
.stamp.sealed .seal{font-family:'Libre Caslon Display',Georgia,serif;color:#a3242b;font-size:1.05rem;line-height:1.3;padding:0 10px}
.stamp.sealed .seal span{display:block;font-size:2.4rem;line-height:1;margin-bottom:6px;color:#1f4d3a}
.stamp-item.later h3{color:#cdbf9f}

.xm-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:44px}

/* page-only extras */
.xm-trailer{background:#fbf2e5;border-bottom:1px solid #c8b692;padding:52px 0}
.xm-trailer-grid{display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:48px;align-items:center;max-width:860px;margin:0 auto}
.xm-trailer video{display:block;width:100%;height:auto;aspect-ratio:9/16;background:#a3242b;border:1px solid #bb9a73;box-shadow:9px 12px 0 #e1c7a6;border-radius:4px}
.xm-trailer h2{font-family:'Libre Caslon Display',Georgia,serif;font-weight:400;font-size:clamp(1.6rem,2.8vw,2.2rem);color:#8e1f18;margin:6px 0 12px}
.xm-trailer .corner-label{color:#a3242b}
.xm-trailer p{max-width:46ch;margin-bottom:16px}
.xm-trailer .xm-btn.ghost{color:#a3242b;border-color:#a3242b}

/* homepage band: a single tidy row */
.xm-band{padding:44px 0 48px}
.xm-band .xm-intro{margin-bottom:30px}
.xm-band .stamp-sheet{grid-template-columns:repeat(6,minmax(0,1fr));gap:26px 18px}
.xm-band .stamp{padding:10px}
.xm-band .postmark{width:50px;height:50px}
.xm-band .postmark b{font-size:1.15rem}
.xm-band .stamp-item h3{font-size:1rem;margin-top:16px}
.xm-band .xm-actions{margin-top:30px}

@media(max-width:900px){.xm-band .stamp-sheet{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:680px){
  .xm{padding:40px 0 46px}
  .stamp-sheet{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 18px}
  .stamp{padding:10px}
  .postmark{width:50px;height:50px}.postmark b{font-size:1.15rem}
  .stamp-item h3{font-size:1.05rem}
  .xm-band .stamp-sheet{grid-template-columns:repeat(2,minmax(0,1fr))}
  .xm-trailer-grid{grid-template-columns:1fr;text-align:center;gap:26px}
  .xm-trailer video{max-width:240px;margin:0 auto}
  .xm-trailer p{margin-left:auto;margin-right:auto}
}
@media (prefers-reduced-motion:reduce){.stamp{transition:none}}
.xm-band .stamp-foot span:first-child{display:none}
.xm-band .stamp-foot{justify-content:flex-end}
@media(max-width:680px){.stamp-foot span:first-child{display:none}.stamp-foot{justify-content:flex-end}}