/* Gifts and custom work. Extends styles.css with the page's own pieces; colors, type, and the tag come from there. */

/* a second line under each item: what the mark looks like, or what to watch for */
.make p.mark{margin-top:.5rem;font-size:.95rem}

/* ideas by occasion: a tag per occasion, then tag-shaped links to the pieces that fit it */
.occ{list-style:none;margin:2rem 0 0;padding:0;border-top:1px solid var(--line)}
.occ > li{display:grid;grid-template-columns:11.5rem minmax(0,1fr);gap:.9rem 2rem;align-items:start;padding-block:1.4rem;border-bottom:1px solid var(--line)}
.occ h3.tag{margin:0;font-size:1.05rem;justify-self:start;width:100%;min-height:3.5em;padding-inline:1.6em}
.occ p{margin:0 0 .85rem;color:var(--muted)}
.pieces{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
a.piece{display:inline-flex;flex-direction:row;font-size:.85rem;padding:.5em 1em;text-decoration:none;box-shadow:inset 0 0 0 2px var(--core)}
a.piece:hover{filter:brightness(1.12)}
/* the stock leather tag colors fall below AA contrast at this size: use the key fob brown from the picture above */
a.piece[data-c="lt"]{--face:#6B4423;--core:#F4F4F0}
.nowrap{white-space:nowrap}
@media (max-width:520px){
  .occ > li{grid-template-columns:1fr}
  .occ h3.tag{width:auto;min-width:12em}
}

/* what to send: the pitch on the left, a ruled list of items on the right */
.send{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
.send dl{margin:0;border-top:1px solid var(--line)}
.send dl > div{display:grid;grid-template-columns:9.5rem minmax(0,1fr);gap:.4rem 1.5rem;padding-block:1.05rem;border-bottom:1px solid var(--line)}
.send dt{font-family:var(--display);font-weight:600;font-size:1.12rem;line-height:1.2;text-transform:uppercase;letter-spacing:.035em}
.send dd{margin:0;color:var(--muted)}
.send .cta{margin-top:1.4rem}
@media (max-width:860px){.send{grid-template-columns:1fr}}
@media (max-width:520px){.send dl > div{grid-template-columns:1fr}}