/* The Suggestion Box: a wooden box at the foot of every page (plus a small hand-painted
   Rubber Duck suggestion box at bottom-right, beside the support duck) that opens a typed index card. Self-contained; every rule is scoped to
   #trd-suggest, #trd-suggest-fx or .trs-dlg so page styles and these never collide.
   Include once per page, in <head>, before duckpod:
     <link rel="stylesheet" href="/assets/trd/suggest.css" data-trd-keep>
     <script src="/assets/trd/suggest.js" data-trd-keep></script>                      */

@font-face{font-family:'TRS Courier';src:url('/assets/trd/fonts/CourierPrime-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'TRS Courier';src:url('/assets/trd/fonts/CourierPrime-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'TRS Cinzel';src:url('/assets/trd/fonts/Cinzel-var.ttf') format('truetype');font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:'TRS Steelfish';src:url('/assets/trd/fonts/Steelfish-Bd.otf') format('opentype');font-weight:700;font-style:normal;font-display:swap}

#trd-suggest,#trd-suggest-fx,.trs-dlg{
  --trs-red:#E10600; --trs-red-txt:#FF3B33; --trs-ink:#E6E4E2; --trs-muted:#8A8A8A;
  --trs-paper:#F4ECD6; --trs-type:#1F1B16; --trs-rule:#A9BDD3; --trs-stamp:#B3150F;
  --trs-mono:'TRS Courier','Courier Prime','Courier New',Courier,monospace;
  --trs-ease:cubic-bezier(.16,1,.3,1);
}
#trd-suggest *,#trd-suggest *::before,#trd-suggest *::after,
#trd-suggest-fx *,.trs-dlg *,.trs-dlg *::before,.trs-dlg *::after{box-sizing:border-box}

/* ================= the footer box ================= */
#trd-suggest{
  position:relative; z-index:5; display:block; clear:both; flex:none;
  width:100%; max-width:none; margin:0; padding:30px 20px 24px;
  background:transparent;
  text-align:center; font-family:var(--trs-mono); color:var(--trs-ink);
  grid-column:1/-1;
}
#trd-suggest.trs-nopod{padding-bottom:104px}          /* no pod spacer below: clear the support duck ourselves */
#trd-suggest::before{                                   /* the site's rule: hairline with a red centre bar */
  content:""; position:absolute; left:50%; top:0; transform:translateX(-50%);
  width:min(900px,86vw); height:1px;
  background:linear-gradient(90deg,transparent,#2A2A2A 18%,#2A2A2A 82%,transparent);
}
#trd-suggest::after{content:""; position:absolute; left:50%; top:-1px; transform:translateX(-50%); width:44px; height:2px; background:var(--trs-red)}

#trd-suggest .trs-open{
  -webkit-appearance:none; appearance:none; margin:0 auto; padding:10px 14px; border:0; border-radius:10px;
  background:none; color:inherit; font:inherit; cursor:pointer; text-align:left;
  display:inline-flex; align-items:center; justify-content:center; gap:44px;
  width:min(880px,100%); max-width:100%;
}
#trd-suggest .trs-art{flex:none; width:clamp(200px,28vw,300px); display:block; transition:transform .35s var(--trs-ease); filter:drop-shadow(0 10px 18px rgba(0,0,0,.7))}
#trd-suggest .trs-art svg{display:block; width:100%; height:auto; overflow:visible}
#trd-suggest .trs-peek{transition:transform .45s var(--trs-ease)}
#trd-suggest .trs-copy{text-shadow:0 2px 14px rgba(0,0,0,.9),0 1px 3px rgba(0,0,0,.9); display:flex; flex-direction:column; align-items:flex-start; gap:12px; flex:1 1 auto; min-width:0; max-width:540px}
#trd-suggest .trs-eyebrow{font-weight:700; font-size:clamp(13px,1.4vw,19px); letter-spacing:.3em; text-transform:uppercase; color:var(--trs-red-txt); line-height:1.2}
#trd-suggest .trs-h{font-family:'TRS Steelfish','Steelfish','Arial Narrow',Impact,sans-serif; font-weight:700; font-size:clamp(40px,6.1vw,84px); line-height:.95; text-wrap:balance; letter-spacing:.005em; color:#fff; margin:0}
#trd-suggest .trs-p{font-size:clamp(15px,1.42vw,19px); line-height:1.45; color:var(--trs-ink); margin:0}
#trd-suggest .trs-cta{
  margin-top:6px; font-weight:700; font-size:clamp(14px,1.35vw,19px); letter-spacing:.16em; text-transform:uppercase; color:#fff;
  padding:14px 24px 13px; border:1px solid rgba(225,6,0,.6); border-left:3px solid var(--trs-red); border-radius:4px;
  background:rgba(20,4,3,.85); transition:background .25s var(--trs-ease),border-color .25s var(--trs-ease);
}
#trd-suggest .trs-open:hover .trs-art,#trd-suggest .trs-open:focus-visible .trs-art{transform:translateY(-3px)}
#trd-suggest .trs-open:hover .trs-peek,#trd-suggest .trs-open:focus-visible .trs-peek{transform:translateY(-7px)}
#trd-suggest .trs-open:hover .trs-cta,#trd-suggest .trs-open:focus-visible .trs-cta{background:rgba(60,6,4,.95); border-color:var(--trs-red-txt)}
#trd-suggest .trs-open:focus-visible{outline:2px solid var(--trs-red-txt); outline-offset:4px}

@media (max-width:560px){
  #trd-suggest{padding:26px 16px 18px}
  #trd-suggest.trs-nopod{padding-bottom:90px}
  #trd-suggest .trs-open{flex-direction:column; gap:18px; text-align:center; padding:8px 4px; width:100%}
  #trd-suggest .trs-art{width:min(230px,62vw)}
  #trd-suggest .trs-copy{align-items:center; max-width:360px; gap:10px}
  #trd-suggest .trs-eyebrow{font-size:13px}
  #trd-suggest .trs-h{font-size:clamp(34px,13vw,52px)}
  #trd-suggest .trs-p{font-size:17px; text-wrap:balance}
  #trd-suggest .trs-cta{font-size:15px; padding:12px 20px 11px}
}

/* ================= the box opener =================
   A small hand-painted Rubber Duck suggestion box (oxblood, cream/black pinstripes) beside the support duck,
   standing on the duck's baseline and never taller than the duck (64px tall on desktop, 54px on phones: the height of the duck's
   own picture plus its glow; the duck button is 84px / 68px).
   At every width the box takes the bottom-right corner and the duck steps left of it
   (html.trs-box-r moves .trd-sup; set by suggest.js only while the opener is shown).
   If the album player or its "Drag me anywhere" hint is in the way, suggest.js lifts the box above the duck
   (measures and sets --trs-r / --trs-b / --trs-lift). Without a duck it sits in the corner.
   Tooltip on hover/focus; one soft glow on first load only. */
#trd-suggest-fx .trs-tab{
  position:fixed; z-index:2147482000;
  right:var(--trs-r,20px);
  bottom:calc(var(--trs-b,20px) + env(safe-area-inset-bottom,0px) + var(--trs-lift,0px));
  -webkit-appearance:none; appearance:none; margin:0; padding:0; cursor:pointer;
  display:block; width:47px; height:64px; border:0; border-radius:6px; background:none;
  color:#EFE7D2; font:700 13px/1 var(--trs-mono);
  -webkit-tap-highlight-color:transparent;
  transition:translate .3s var(--trs-ease), opacity .25s ease, visibility 0s;
}
#trd-suggest-fx .trs-tab img{
  display:block; width:100%; height:100%; object-fit:contain; object-position:50% 100%; pointer-events:none;
  filter:drop-shadow(0 5px 7px rgba(0,0,0,.7)) drop-shadow(0 0 1px rgba(0,0,0,.6));
  transition:filter .3s var(--trs-ease);
}
#trd-suggest-fx .trs-tab:hover,#trd-suggest-fx .trs-tab:focus-visible{translate:0 -3px}
#trd-suggest-fx .trs-tab:hover img,#trd-suggest-fx .trs-tab:focus-visible img{
  filter:drop-shadow(0 9px 10px rgba(0,0,0,.75)) drop-shadow(0 0 1px rgba(0,0,0,.6)) brightness(1.06);
}
#trd-suggest-fx .trs-tab:active{translate:0 0}
#trd-suggest-fx .trs-tab:focus-visible{outline:2px solid var(--trs-red-txt); outline-offset:4px}
#trd-suggest-fx .trs-tip{                                      /* the label, as a tooltip just above, centred */
  display:block; position:absolute; left:50%; bottom:calc(100% + 10px); transform:translate(-50%,4px);
  padding:7px 10px 6px; border-radius:6px; background:#141210; border:1px solid rgba(244,236,214,.2);
  color:#EFE7D2; font:700 12px/1 var(--trs-mono); letter-spacing:.1em; text-transform:uppercase; white-space:nowrap;
  box-shadow:0 6px 16px rgba(0,0,0,.55); opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s var(--trs-ease);
}
#trd-suggest-fx .trs-tab:focus-visible .trs-tip{opacity:1; transform:translate(-50%,0)}
@media (hover:hover){#trd-suggest-fx .trs-tab:hover .trs-tip{opacity:1; transform:translate(-50%,0)}}
#trd-suggest-fx.trs-tab-off .trs-tab{display:none}
#trd-suggest-fx.trs-behind .trs-tab{opacity:0; visibility:hidden; pointer-events:none; transition:opacity .2s ease, visibility 0s .2s}   /* the duck's own bubble is open */
/* phones: a little smaller, like the duck */
@media (max-width:480px){
  #trd-suggest-fx .trs-tab{width:40px; height:54px}
}
/* the duck steps left so the box can stand in the corner, right of the duck
   (desktop: corner 14 + box 47 + gap 8 = 69; phones: corner 8 + box 40 + gap 8 = 56) */
@media (min-width:481px){html.trs-box-r .trd-sup{right:69px}}
@media (max-width:480px){html.trs-box-r .trd-sup{right:56px}}
/* one gentle glow on first load, then still */
#trd-suggest-fx.trs-hello .trs-tab img{animation:trs-hello 2.4s ease-in-out .9s 1 both}
@keyframes trs-hello{
  0%,100%{filter:drop-shadow(0 5px 7px rgba(0,0,0,.7)) drop-shadow(0 0 1px rgba(0,0,0,.6)) drop-shadow(0 0 0 rgba(225,6,0,0))}
  45%{filter:drop-shadow(0 5px 7px rgba(0,0,0,.7)) drop-shadow(0 0 1px rgba(0,0,0,.6)) drop-shadow(0 0 12px rgba(255,59,51,.65))}
}

/* ================= the dialog ================= */
.trs-dlg{
  position:fixed; inset:0; width:100%; height:100%; max-width:none; max-height:none;
  margin:0; padding:0; border:0; background:transparent; color:var(--trs-type); overflow:auto; overscroll-behavior:contain;
  font-family:var(--trs-mono);
}
.trs-dlg:not([open]){display:none}
.trs-dlg::backdrop{background:rgba(3,3,3,.8); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px)}
.trs-dlg .trs-stage{min-height:100%; display:flex; align-items:center; justify-content:center; padding:18px 14px}
.trs-dlg .trs-inner{width:min(470px,100%); display:flex; flex-direction:column; align-items:center}
.trs-dlg .trs-x{
  -webkit-appearance:none; appearance:none; align-self:flex-end; margin:0 2px 10px; padding:6px 4px; border:0; background:none; cursor:pointer;
  font:700 12px/1 var(--trs-mono); letter-spacing:.2em; text-transform:uppercase; color:var(--trs-ink);
  border-bottom:1px solid rgba(225,6,0,.7);
}
.trs-dlg .trs-x:hover{color:#fff; border-bottom-color:var(--trs-red-txt)}
.trs-dlg .trs-wrap{width:100%; position:relative}

/* ---- the index card ---- */
.trs-dlg .trs-card{
  position:relative; width:100%; margin:0; padding:16px 20px 18px; border-radius:3px;
  background:
    radial-gradient(120% 80% at 0% 0%,rgba(255,255,255,.45),rgba(255,255,255,0) 55%),
    radial-gradient(90% 70% at 100% 100%,rgba(150,110,50,.16),rgba(150,110,50,0) 60%),
    var(--trs-paper);
  color:var(--trs-type);
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 20px 44px rgba(0,0,0,.65), 0 2px 6px rgba(0,0,0,.4);
  transform:rotate(-.6deg); transform-origin:50% 0;
  text-align:left;
}
.trs-dlg .trs-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding-bottom:7px; border-bottom:3px double #C0281E; margin-bottom:12px}
.trs-dlg .trs-title{margin:0; font:700 15px/1.2 var(--trs-mono); letter-spacing:.2em; text-transform:uppercase; color:var(--trs-type)}
.trs-dlg .trs-date{font-size:12.5px; letter-spacing:.12em; color:#5d4e3c; white-space:nowrap}
.trs-dlg .trs-to{margin:0 0 10px; font-size:13px; line-height:1.3; color:#5d4e3c}
.trs-dlg .trs-f{display:block; margin:0 0 12px}
.trs-dlg .trs-l{display:flex; align-items:baseline; gap:8px; margin:0 0 2px; font:700 11.5px/1.3 var(--trs-mono); letter-spacing:.14em; text-transform:uppercase; color:#4a3d2e}
.trs-dlg .trs-l em{font-style:normal; font-weight:400; letter-spacing:.06em; text-transform:none; color:#7d6b55}
.trs-dlg .trs-l em.trs-req{color:var(--trs-stamp)}
.trs-dlg textarea,.trs-dlg input{
  display:block; width:100%; margin:0; padding:0 2px; border:0; border-radius:0; outline:0;
  background:transparent; color:var(--trs-type); font:400 16px/28px var(--trs-mono); box-shadow:none;
  -webkit-appearance:none; appearance:none;
}
.trs-dlg textarea{
  height:calc(28px * 4 + 2px); resize:none; overflow:auto;
  background:repeating-linear-gradient(180deg,transparent 0 27px,var(--trs-rule) 27px 28px); background-attachment:local;
}
.trs-dlg input{height:30px; border-bottom:1px solid var(--trs-rule)}
.trs-dlg textarea:focus,.trs-dlg input:focus{background-color:rgba(255,248,225,.7); box-shadow:0 0 0 2px rgba(179,21,15,.55)}
.trs-dlg ::placeholder{color:#9b8b75; opacity:1}
.trs-dlg .trs-row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.trs-dlg .trs-hp{position:absolute!important; left:-9999px!important; width:1px; height:1px; overflow:hidden}
.trs-dlg .trs-msg{min-height:0; margin:0; font-size:12.5px; line-height:1.35; color:var(--trs-stamp)}
.trs-dlg .trs-msg:empty{display:none}
.trs-dlg .trs-foot{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:4px}
.trs-dlg .trs-note{margin:0; font-size:11.5px; line-height:1.35; color:#7d6b55; max-width:190px}
.trs-dlg .trs-btn{
  -webkit-appearance:none; appearance:none; flex:none; margin:0; cursor:pointer;
  padding:11px 15px 10px; border:2px solid #7C0C07; border-radius:3px;
  background:linear-gradient(#C41A12,var(--trs-stamp)); color:#FFF6E6;
  font:700 12.5px/1 var(--trs-mono); letter-spacing:.14em; text-transform:uppercase;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 2px 0 #5a0905, 0 4px 10px rgba(0,0,0,.25);
  transition:transform .15s ease, filter .15s ease;
}
.trs-dlg .trs-btn:hover{filter:brightness(1.12)}
.trs-dlg .trs-btn:active{transform:translateY(2px); box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 0 0 #5a0905}
.trs-dlg .trs-btn[disabled]{opacity:.7; cursor:progress}
.trs-dlg .trs-btn.trs-ghost{background:transparent; color:var(--trs-stamp); border-color:var(--trs-stamp); box-shadow:none}
.trs-dlg .trs-btn:focus-visible,.trs-dlg .trs-x:focus-visible{outline:2px solid var(--trs-red-txt); outline-offset:3px}

/* ---- the thank-you card ---- */
.trs-dlg .trs-thanks{text-align:center; padding:22px 22px 20px}
.trs-dlg .trs-stamp{
  display:inline-block; margin:2px 0 14px; padding:6px 14px 5px; border:3px double var(--trs-stamp); border-radius:4px;
  color:var(--trs-stamp); font:700 20px/1 var(--trs-mono); letter-spacing:.32em; text-indent:.32em; text-transform:uppercase;
  transform:rotate(-5deg); opacity:.88; mix-blend-mode:multiply;
}
.trs-dlg .trs-ty{margin:0 auto 6px; max-width:330px; font-size:16px; line-height:1.45; min-height:2.9em}
.trs-dlg .trs-ty2{margin:0 auto 16px; max-width:330px; font-size:13px; line-height:1.4; color:#5d4e3c}
.trs-dlg .trs-acts{display:flex; justify-content:center; gap:12px; flex-wrap:wrap}
.trs-dlg .trs-caret[hidden]{display:none}
.trs-dlg .trs-caret{display:inline-block; width:.55em; border-bottom:2px solid currentColor; animation:trs-blink 1s steps(1) infinite}
@keyframes trs-blink{50%{opacity:0}}
.trs-sr{position:absolute!important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* ---- the box under the card ---- */
.trs-dlg .trs-art{width:176px; margin-top:20px; display:block; filter:drop-shadow(0 12px 18px rgba(0,0,0,.75))}
.trs-dlg .trs-art svg{display:block; width:100%; height:auto; overflow:visible}

@media (max-width:440px){
  .trs-dlg .trs-row{grid-template-columns:1fr; gap:0}
  .trs-dlg .trs-card{padding:14px 16px 16px}
  .trs-dlg .trs-art{width:156px; margin-top:16px}
  .trs-dlg .trs-note{max-width:170px}
}
@media (max-height:700px){.trs-dlg textarea{height:calc(28px * 3 + 2px)} .trs-dlg .trs-art{width:140px; margin-top:12px}}

@media (prefers-reduced-motion:reduce){
  #trd-suggest .trs-art,#trd-suggest .trs-peek,#trd-suggest .trs-cta,#trd-suggest-fx .trs-tab,#trd-suggest-fx .trs-tip,.trs-dlg .trs-btn{transition:none}
  #trd-suggest-fx.trs-hello .trs-tab img{animation:none}
  #trd-suggest-fx .trs-tab img{transition:none}
  #trd-suggest-fx .trs-tab:hover,#trd-suggest-fx .trs-tab:focus-visible{translate:none}
  #trd-suggest .trs-open:hover .trs-art,#trd-suggest .trs-open:focus-visible .trs-art{transform:none}
  #trd-suggest .trs-open:hover .trs-peek,#trd-suggest .trs-open:focus-visible .trs-peek{transform:translateY(-4px)}
  .trs-dlg .trs-caret{animation:none}
}
@media print{#trd-suggest,#trd-suggest-fx{display:none!important}}
html.trs-lock{overflow:hidden}
/* the pod's minimized pill leaves no spacer below the page; on phones the pill and the
   support duck share the bottom corners, so the box keeps its own clearance */
@media (max-width:560px){#trd-suggest:has(~ #trd-pod[data-view="pill"]){padding-bottom:92px}}