/* The gift finder (/gifts/) and its budget pages (/gifts/under-N/). DESIGN.md §7 "Gift
   finder" and "Gift counter card"; reference giftFinder() and giftCounter(). The note is
   butter (never pink), torn at the bottom, held by blue washi; the budgets are hang tags. */

/* ---------- the finder: words left, the note right ---------- */
.gf .sw{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr);gap:44px;align-items:center;padding-block:40px clamp(44px,6vw,80px)}
.gnote{position:relative;filter:drop-shadow(0 10px 18px var(--shadow));transform:rotate(-.8deg)}
.gform{background:var(--butter);padding:34px 32px 50px;position:relative;--z:18px;margin:0}
.gnote .washi{left:50%;top:-12px;width:110px;height:26px;margin-left:-55px;transform:rotate(2deg)}
.gform .addr{font:400 12px/1.6 var(--label);letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb,var(--ink) 74%,transparent);margin:0 0 18px}
.frow{display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px;align-items:end;padding:12px 0;border-bottom:1px solid color-mix(in srgb,var(--ink) 25%,transparent)}
.frow label{font:400 12px/1 var(--label);letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb,var(--ink) 80%,transparent);padding-bottom:6px}
.frow select{border:0;background:transparent;font:var(--dw) 20px/1.2 var(--display);padding:4px 0;color:var(--ink);cursor:pointer;width:100%;min-width:0;text-overflow:ellipsis}
.frow select:focus-visible{outline:2px solid var(--ink2);outline-offset:2px}
.gform .btn{margin-top:22px;width:100%;justify-content:center;font-size:16px}
.gform .seal{position:absolute;right:22px;top:20px;width:62px;height:62px;border-radius:50%;display:grid;place-items:center;margin:0;font:400 10px/1.1 var(--label);letter-spacing:.08em;text-transform:uppercase;text-align:center;transform:rotate(-10deg)}

/* ---------- the budgets: hang tags on a yarn line, each a link ---------- */
.budgets .sw{padding-bottom:clamp(30px,4vw,56px)}
/* the yarn runs the content column's full width, as home's drop line (.line-row); the
   tags hang where it rises, at a sixth, a half and five sixths */
.tagline{position:relative;margin-top:22px;padding-top:34px}
.tagline > svg.yarn{position:absolute;left:-24px;top:0;width:calc(100% + 48px);height:44px;overflow:visible}
.btags{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;justify-items:center}
.btags li{position:relative;display:grid;justify-items:center}
/* the tag's string runs from the yarn down to its hole */
.btags li::before{content:"";position:absolute;left:50%;top:-21px;width:2px;height:43px;margin-left:-1px;background:var(--yarn);border-radius:2px;z-index:2}
.btag{display:grid;justify-items:center;gap:10px;text-decoration:none;color:var(--ink);padding-top:0}
.btag .tg,.bandtag .tg{display:block;box-sizing:border-box;width:112px;height:138px;padding:44px 6px 6px;position:relative;background:var(--paper);text-align:center;
  font:var(--dw) 34px/1.02 var(--display);word-spacing:120px;letter-spacing:-.01em;font-variant-numeric:tabular-nums lining-nums;
  clip-path:polygon(50% 0,100% 20%,100% 100%,0 100%,0 20%);filter:drop-shadow(0 2px 3px var(--shadow));transform-origin:50% 22px}
/* "Under £30" is one text (the builder reads a band only whole): the first line, "Under",
   is the tag's small word, as DESIGN.md §6's "UNDER / £15" */
.btag .tg::first-line,.bandtag .tg::first-line{font:400 13px/1.6 var(--label);letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb,var(--ink) 74%,transparent)}
.btag .tg::before,.bandtag .tg::before{content:"";position:absolute;left:50%;top:22px;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--ground);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--ink) 25%,transparent)}
.btags .b1 .tg{transform:rotate(-6deg)}.btags .b2 .tg{transform:rotate(4deg)}.btags .b3 .tg{transform:rotate(-3deg)}
.btag .n{font:400 12px/1.3 var(--label);letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb,var(--ink) 74%,transparent);
  text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:5px;text-decoration-thickness:1.5px}
.btag:hover .n,.btag:focus-visible .n{color:var(--ink);text-decoration-color:var(--sweep-blue)}
.btag:focus-visible{outline:none}
.btag:focus-visible .tg{outline:2px solid var(--ink2);outline-offset:3px}
@media (prefers-reduced-motion:no-preference){
  .btag .tg{transition:transform .6s cubic-bezier(.16,1,.3,1)}
  .btags .b1 .btag:hover .tg{transform:rotate(6deg)}.btags .b2 .btag:hover .tg{transform:rotate(-4deg)}.btags .b3 .btag:hover .tg{transform:rotate(3deg)}
}

.g-small{padding-block:clamp(30px,4vw,48px) clamp(30px,5vw,60px)}
.g-small p{margin:0 0 6px}

/* ---------- a budget's page ---------- */
.gr-head .sw{display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:24px;align-items:end;padding-block:34px 8px}
.gr-head .also{margin:18px 0 0;font-size:15px}
.gr-head .also a{font-weight:500;text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:5px;text-decoration-thickness:1.5px}
.gr-head .also a:hover{color:var(--ink2)}
/* the budget's hang tag on yarn from blue washi (as the gift counter's) */
.bandtag{position:relative;height:210px;width:200px}
.bandtag .washi{left:96px;top:6px;width:62px;height:22px;transform:rotate(12deg)}
.bandtag .str{position:absolute;left:46px;top:6px;overflow:visible}
.bandtag .str path{fill:none;stroke:var(--yarn);stroke-width:1.6;stroke-linecap:round}
.bandtag .str path.thread{stroke:var(--yarn2);stroke-width:1.6;stroke-dasharray:1 2.4}
.bandtag .tg{position:absolute;left:8px;top:58px;transform:rotate(8deg);--hole:var(--ground)}
@media (prefers-reduced-motion:no-preference){
  .bandtag .tg{transition:transform .6s cubic-bezier(.16,1,.3,1)}
  .gr-head:hover .bandtag .tg{transform:rotate(-8deg)}
}

.gsec{scroll-margin-top:12px}
.gsec .sw{padding-block:clamp(28px,4vw,46px) 0}
.gsec-head{display:flex;align-items:baseline;justify-content:space-between;gap:18px;border-bottom:1px solid var(--rule);padding-bottom:10px}
.gsec-head h2{font-size:clamp(26px,2.8vw,34px)}
.gsec-head .n{font:400 12px/1.3 var(--label);letter-spacing:.13em;text-transform:uppercase;color:color-mix(in srgb,var(--ink) 74%,transparent);margin:0;white-space:nowrap}
/* arriving from the note: the section asked for is underlined in butter */
.gsec:target .gsec-head h2{background:linear-gradient(transparent 62%,var(--butter) 62% 92%,transparent 92%)}
.gsec .trim{margin:10px 0 0}
/* a choice with nothing in this budget: its note shows only when the link lands on it */
.gnone{display:none;margin:18px 0 0;padding:12px 16px;background:var(--butter);max-width:62ch;font-size:15px;scroll-margin-top:12px}
.gnone:target{display:block}
.gsec .gnone{margin:0 0 20px}

/* the cards: stamp cards on pastel fields, three to a row, slightly askew (as the drops) */
.gcards{list-style:none;margin:0;padding:24px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 30px;align-items:start}
.gcard{position:relative;filter:drop-shadow(0 6px 12px var(--shadow))}
.gcard.g1{transform:rotate(-1deg)}.gcard.g2{transform:rotate(.8deg)}.gcard.g3{transform:rotate(-.5deg)}
.gcard .s{background:var(--white);padding:12px}
.gcard .in{background:var(--tint,var(--blue));padding:16px 16px 18px;position:relative}
.gcard .in.nophoto{padding-top:24px}
.gcard h3{font:var(--dw) 21px/1.12 var(--display);letter-spacing:var(--dtrack);margin:12px 0 0;overflow-wrap:break-word}
.gcard .nophoto h3{margin-top:0;font-size:24px}
.gcard .pricelink{max-width:100%}
.gcard .shop{overflow-wrap:anywhere}
.gcard .diarynote{font-size:24px;margin-top:12px}
@media (prefers-reduced-motion:no-preference){
  .gcard{transition:transform .5s cubic-bezier(.16,1,.3,1)}
  .gcard:hover{transform:translateY(-3px) rotate(0)}
}

@media (max-width:900px){
  .gf .sw{grid-template-columns:minmax(0,1fr);gap:34px}
  .gcards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  .gform{padding:30px 22px 46px}
  .gform .seal{width:54px;height:54px;right:16px;top:16px;font-size:9px}
  .frow{grid-template-columns:minmax(0,1fr);gap:4px}
  .frow label{padding-bottom:0}
  .gr-head .sw{grid-template-columns:minmax(0,1fr) 120px;gap:8px}
  .bandtag{height:170px;width:120px;transform:scale(.8);transform-origin:top right}
  .bandtag .washi{left:70px}
  .bandtag .str{left:20px}
  .bandtag .tg{left:-18px}
  .gcards{grid-template-columns:minmax(0,1fr);gap:26px}
  .tagline > svg.yarn{left:-14px;width:calc(100% + 28px)}
  .btags{gap:10px}
  .btag .tg{width:92px;height:116px;padding-top:40px;font-size:28px}
}