/* ==========================================================================
   TDSH Giallo 1.0.3: the evidence locker (off-canvas drawer, D6), its triggers,
   and the site-wide motion layer (item 9). Loaded on every front-end page.
   Motion rules: transform + opacity only, nothing animates layout, and every
   animation sits behind prefers-reduced-motion:no-preference.
   ========================================================================== */

/* ---------- triggers ---------- */
.tdsh-giallo .tg-evid{display:inline-flex;align-items:center;gap:.5em;font-family:var(--tg-display);font-weight:400;text-transform:uppercase;letter-spacing:.05em;line-height:1;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.tdsh-giallo .tg-evid__ico{width:1.1em;height:1.1em;flex:0 0 auto}
.tdsh-giallo .tg-evid:focus-visible{outline:3px solid var(--tg-y);outline-offset:3px}

/* (a) pinned to the end of the scrolling nav strip (<=1100px). Sticky inside the strip's own scroller. */
body.tdsh-giallo .mainnav ul.menu>li.tg-nav-evid{display:none}
@media (max-width:1100px){
  body.tdsh-giallo .mainnav ul.menu>li.tg-nav-evid{display:flex;align-items:center;position:sticky;right:0;z-index:2;margin-left:auto;padding:0 0 0 22px;background:linear-gradient(90deg,rgba(19,18,15,0),var(--tg-k2) 22px)}
  body.tdsh-giallo .mainnav ul.menu>li.tg-nav-evid>a.tg-evid{font-size:17px;padding:9px 11px 7px;margin:4px 0;background:var(--tg-r) url(../img/tex-red.webp) 0 0/600px;color:var(--tg-cr);border:2px solid var(--tg-cr);outline:1.5px solid var(--tg-r);outline-offset:2px;transform:rotate(-2deg);box-shadow:3px 3px 0 rgba(0,0,0,.6);height:auto}
  body.tdsh-giallo .mainnav ul.menu>li.tg-nav-evid>a.tg-evid:hover{background:var(--tg-y);color:var(--tg-k)}
  /* the old "→" scroll hint is replaced by the stamp */
  body.tdsh-giallo .header_bottom56 .container::after{display:none}
}

/* (b) desktop: stamp in the utility strip */
.tdsh-giallo .tg-util .tg-evid--util{font-size:15px;letter-spacing:.07em;color:var(--tg-k);background:var(--tg-y);padding:3px 9px 2px;margin-left:.4em;transform:rotate(-1.5deg)}
.tdsh-giallo .tg-util .tg-evid--util:hover{background:var(--tg-r);color:var(--tg-cr)}
@media (max-width:1100px){.tdsh-giallo .tg-util .tg-evid--util{display:none}}

/* (c) the manila case-file tab: slides out of the right edge once the header has scrolled away */
.tdsh-giallo .tg-casetab{position:fixed;right:0;top:46%;z-index:9990;pointer-events:none}
.tdsh-giallo .tg-casetab .tg-evid--tab{pointer-events:auto;writing-mode:vertical-rl;transform:translateX(110%);visibility:hidden;font-size:19px;letter-spacing:.12em;padding:16px 9px 14px 8px;background:var(--tg-y) url(../img/tex-yellow.webp) 0 0/600px;color:var(--tg-k);border:2px solid var(--tg-k);border-right:0;border-radius:8px 0 0 8px;box-shadow:-4px 4px 0 rgba(0,0,0,.55);transition:transform .32s cubic-bezier(.2,.9,.3,1.2),visibility 0s linear .32s}
.tdsh-giallo .tg-casetab .tg-evid--tab .tg-evid__ico{transform:rotate(90deg)}
.tdsh-giallo .tg-casetab.is-shown .tg-evid--tab{transform:none;visibility:visible;transition:transform .32s cubic-bezier(.2,.9,.3,1.2),visibility 0s}
.tdsh-giallo .tg-casetab .tg-evid--tab:hover{background:var(--tg-r);color:var(--tg-cr)}
@media (max-width:840px){
  /* phones: a folder tab poking out of the bottom-left edge (Fox's go-to-top owns bottom-right) */
  .tdsh-giallo .tg-casetab{top:auto;right:auto;left:0;bottom:18px}
  .tdsh-giallo .tg-casetab .tg-evid--tab{writing-mode:horizontal-tb;transform:translateX(-110%);font-size:16px;padding:11px 14px 9px 12px;border:2px solid var(--tg-k);border-left:0;border-radius:0 8px 8px 0;box-shadow:4px 4px 0 rgba(0,0,0,.55)}
  .tdsh-giallo .tg-casetab .tg-evid--tab .tg-evid__ico{transform:none}
}
html.tg-locked .tdsh-giallo .tg-casetab,html.tg-locked body.tdsh-giallo .tg-casetab{visibility:hidden}

/* ---------- the drawer ---------- */
html.tg-locked,html.tg-locked body{overflow:hidden!important}
html.tg-locked body{padding-right:var(--tg-sbw,0)}
.tdsh-giallo .tg-drawer{position:fixed;inset:0;z-index:100000;visibility:hidden;pointer-events:none}
.tdsh-giallo .tg-drawer.is-open,.tdsh-giallo .tg-drawer:target{visibility:visible;pointer-events:auto}
.tdsh-giallo .tg-drawer__scrim{position:absolute;inset:0;background:rgba(5,5,5,.72);opacity:0;cursor:default}
.tdsh-giallo .tg-drawer.is-open .tg-drawer__scrim,.tdsh-giallo .tg-drawer:target .tg-drawer__scrim{opacity:1}
.tdsh-giallo .tg-drawer__panel{position:absolute;top:0;right:0;bottom:0;width:min(600px,100%);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;background:var(--tg-k2) url(../img/tex-black.webp) 0 0/600px;color:var(--tg-ink-1);box-shadow:-14px 0 0 rgba(0,0,0,.45);transform:translateX(104%);outline:0;font-family:var(--tg-sans)}
.tdsh-giallo .tg-drawer.is-open .tg-drawer__panel,.tdsh-giallo .tg-drawer:target .tg-drawer__panel{transform:none}
.tdsh-giallo .tg-drawer__panel::after{content:"";position:fixed;inset:0;pointer-events:none;background:url(../img/grain.png) repeat 0 0/512px 512px;opacity:.5}
.tdsh-giallo .tg-drawer :is(h2,h3){text-shadow:none;letter-spacing:inherit}
.tdsh-giallo .tg-drawer a{color:inherit}

/* illustrated panel */
.tdsh-giallo .tg-drawer__art{position:relative;min-height:236px;padding:22px 24px 26px;overflow:hidden;color:var(--tg-k)}
.tdsh-giallo .tg-drawer__eye{position:absolute;right:-30px;top:22px;width:54%;max-width:320px;height:auto;aspect-ratio:1000/620;object-fit:cover;transform:rotate(3deg);box-shadow:0 0 0 6px var(--tg-cr),8px 10px 0 6px rgba(10,10,10,.45)}
.tdsh-giallo .tg-drawer__booth{position:absolute;right:20px;top:-34px;width:58px;height:auto;aspect-ratio:228/816;transform:rotate(9deg);box-shadow:0 0 0 4px var(--tg-cr),5px 6px 0 4px rgba(10,10,10,.4);z-index:1}
.tdsh-giallo .tg-drawer__art .tg-tape{left:auto;right:30%;top:8px;width:96px;height:26px;transform:rotate(-6deg);z-index:2}
.tdsh-giallo .tg-drawer__head{position:relative;z-index:3;margin-top:58px;max-width:50%}
.tdsh-giallo .tg-drawer__head .tg-kicker{margin:0 0 8px;color:var(--tg-r2)}
.tdsh-giallo .tg-drawer__head h2{font-size:clamp(46px,8vw,66px);line-height:.86;color:var(--tg-k);margin:0}
.tdsh-giallo .tg-drawer__x{position:absolute;left:24px;top:18px;z-index:3;display:inline-flex;align-items:center;gap:.35em;font-family:var(--tg-display);font-size:19px;line-height:1;text-transform:uppercase;letter-spacing:.06em;text-decoration:none;color:var(--tg-cr)!important;background:var(--tg-k);padding:8px 12px 6px;box-shadow:3px 3px 0 var(--tg-r2)}
.tdsh-giallo .tg-drawer__x span[aria-hidden]{font-size:1.3em;line-height:.6}
.tdsh-giallo .tg-drawer__x:hover,.tdsh-giallo .tg-drawer__x:focus-visible{background:var(--tg-r);outline:2px solid var(--tg-k);outline-offset:2px}

/* search */
.tdsh-giallo .tg-drawer__search{position:relative;z-index:2;margin:0;padding:26px 24px 24px;background:var(--tg-cr) url(../img/tex-cream.webp) 0 0/600px;color:var(--tg-k)}
.tdsh-giallo .tg-drawer__search>label{display:flex;align-items:center;gap:10px;margin:0 0 10px;color:var(--tg-k)}
.tdsh-giallo .tg-kbd{font-family:var(--tg-mono);font-size:12px;line-height:1;border:1.5px solid currentColor;border-bottom-width:3px;padding:3px 6px 2px;border-radius:3px}
.tdsh-giallo .tg-drawer__field{display:flex;box-shadow:6px 6px 0 var(--tg-k)}
.tdsh-giallo .tg-drawer__field input{flex:1 1 auto;min-width:0;margin:0;font-family:var(--tg-sans);font-size:22px;font-weight:600;line-height:1.2;color:var(--tg-k);background:#fffaf0;border:3px solid var(--tg-k);border-right:0;border-radius:0;padding:14px 16px;-webkit-appearance:none;appearance:none;height:auto;box-shadow:none}
.tdsh-giallo .tg-drawer__field input::placeholder{color:#6b6252;opacity:1}
.tdsh-giallo .tg-drawer__field input:focus{outline:3px solid var(--tg-r);outline-offset:-6px}
.tdsh-giallo .tg-drawer__field button{flex:0 0 auto;margin:0;font-family:var(--tg-display);font-size:24px;line-height:1;text-transform:uppercase;letter-spacing:.04em;color:var(--tg-y);background:var(--tg-k);border:3px solid var(--tg-k);border-radius:0;padding:0 18px;cursor:pointer;height:auto}
.tdsh-giallo .tg-drawer__field button:hover,.tdsh-giallo .tg-drawer__field button:focus-visible{background:var(--tg-r2);color:var(--tg-cr);border-color:var(--tg-r2)}
.tdsh-giallo .tg-drawer__qh{margin:20px 0 10px}
.tdsh-giallo .tg-drawer__quick{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.tdsh-giallo .tg-drawer__quick li{margin:0;padding:0}
.tdsh-giallo .tg-drawer__quick li::before{content:none}
.tdsh-giallo .tg-drawer__quick a{display:inline-flex;align-items:baseline;gap:.5em;font-family:var(--tg-wide);font-size:13px;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;color:var(--tg-k);border:2px solid var(--tg-k);padding:7px 10px 6px;background:transparent}
.tdsh-giallo .tg-drawer__quick a b{font-family:var(--tg-mono);font-size:12px;font-weight:700;color:var(--tg-r2)}
.tdsh-giallo .tg-drawer__quick a:hover,.tdsh-giallo .tg-drawer__quick a:focus-visible{background:var(--tg-k);color:var(--tg-y)}
.tdsh-giallo .tg-drawer__quick a:hover b{color:var(--tg-y)}

/* recent ledgers */
.tdsh-giallo .tg-drawer__ledgers{position:relative;z-index:2;padding:22px 24px 24px}
.tdsh-giallo .tg-drawer__ledgers h3{margin:0 0 12px;color:var(--tg-cr)}
.tdsh-giallo .tg-drawer__ledgers ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tdsh-giallo .tg-drawer__ledgers li{margin:0}
.tdsh-giallo .tg-drawer__ledgers li::before{content:none}
.tdsh-giallo .tg-drawer__ledgers a{display:block;height:100%;box-sizing:border-box;text-decoration:none;color:var(--tg-k)!important;background:var(--tg-cr) url(../img/tex-cream.webp) 0 0/600px;padding:10px 12px 12px;border-left:2px dashed rgba(10,10,10,.35);box-shadow:4px 4px 0 rgba(10,10,10,.45)}
.tdsh-giallo .tg-drawer__ledgers a:hover,.tdsh-giallo .tg-drawer__ledgers a:focus-visible{background:var(--tg-y)}
.tdsh-giallo .tg-drawer__ld{display:block;font-family:var(--tg-display);font-size:32px;line-height:.95;text-transform:uppercase}
.tdsh-giallo .tg-drawer__lt{display:block;margin-top:4px;font-family:var(--tg-type);font-size:15px;line-height:1.38;letter-spacing:0;color:#15120e}

/* full menu */
.tdsh-giallo .tg-drawer__nav{position:relative;z-index:2;padding:22px 24px 10px}
.tdsh-giallo .tg-drawer__nav>h3,.tdsh-giallo .tg-drawer__social>h3{margin:0 0 6px;color:var(--tg-y)}
.tdsh-giallo .tg-drawer__menu,.tdsh-giallo .tg-drawer__menu ul{list-style:none;margin:0;padding:0}
.tdsh-giallo .tg-drawer__menu li{margin:0;padding:0;border:0}
.tdsh-giallo .tg-drawer__menu li::before{content:none}
.tdsh-giallo .tg-drawer__menu>li{border-bottom:1px dashed rgba(242,237,216,.22)}
.tdsh-giallo .tg-drawer__menu>li>a{display:flex;align-items:baseline;gap:14px;font-family:var(--tg-display);font-size:30px;line-height:1.02;text-transform:uppercase;text-decoration:none;color:var(--tg-cr);padding:11px 0 9px;counter-increment:tgdm}
.tdsh-giallo .tg-drawer__menu{counter-reset:tgdm}
.tdsh-giallo .tg-drawer__menu>li>a::before{content:counter(tgdm,decimal-leading-zero);font-family:var(--tg-mono);font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--tg-r);min-width:2.2em}
.tdsh-giallo .tg-drawer__menu a:hover,.tdsh-giallo .tg-drawer__menu a:focus-visible{color:var(--tg-y)}
.tdsh-giallo .tg-drawer__menu>li.current-menu-item>a,.tdsh-giallo .tg-drawer__menu>li.current-menu-ancestor>a,.tdsh-giallo .tg-drawer__menu>li.current-post-ancestor>a{color:var(--tg-y)}
.tdsh-giallo .tg-drawer__menu>li.current-menu-item>a::after{content:"You are here";margin-left:auto;font-family:var(--tg-mono);font-size:11px;letter-spacing:.12em;color:var(--tg-y);border:1.5px solid currentColor;padding:2px 6px}
.tdsh-giallo .tg-drawer__menu .sub-menu{padding:0 0 10px 3.1em}
.tdsh-giallo .tg-drawer__menu .sub-menu a{display:block;font-family:var(--tg-sans);font-size:17px;font-weight:600;line-height:1.35;text-decoration:none;color:var(--tg-ink-2);padding:6px 0}
.tdsh-giallo .tg-drawer__menu :is(.menu-icon-icon,u.mk,.post-nav-item,.mega-content){display:none}

/* social (cloned from Fox's list by giallo.js) */
.tdsh-giallo .tg-drawer__social{position:relative;z-index:2;padding:18px 24px 6px}
.tdsh-giallo .tg-drawer__social[hidden]{display:none}
.tdsh-giallo .tg-drawer__social ul{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.tdsh-giallo .tg-drawer__social li{margin:0}
.tdsh-giallo .tg-drawer__social li::before{content:none}
.tdsh-giallo .tg-soc{display:inline-flex;align-items:center;gap:8px;font-family:var(--tg-mono);font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--tg-cr)!important;border:1.5px solid rgba(242,237,216,.45);padding:8px 11px 7px;min-height:24px}
.tdsh-giallo .tg-soc i{font-size:16px;line-height:1;color:var(--tg-y)}
.tdsh-giallo .tg-soc:hover,.tdsh-giallo .tg-soc:focus-visible{background:var(--tg-y);color:var(--tg-k)!important;border-color:var(--tg-y)}
.tdsh-giallo .tg-soc:hover i{color:var(--tg-k)}
.tdsh-giallo .tg-drawer__foot{position:relative;z-index:2;margin:18px 24px 30px;padding-top:16px;border-top:1px dashed rgba(242,237,216,.25);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--tg-cr)}
.tdsh-giallo .tg-drawer__foot .tg-wide{font-size:20px;line-height:1}

@media (max-width:480px){
  .tdsh-giallo .tg-drawer__panel{box-shadow:none}
  .tdsh-giallo .tg-drawer__art{min-height:208px;padding:18px 18px 22px}
  .tdsh-giallo .tg-drawer__head{margin-top:56px}
  .tdsh-giallo .tg-drawer__head h2{font-size:12.5vw}
  .tdsh-giallo .tg-drawer__head{max-width:56%}
  .tdsh-giallo .tg-drawer__eye{width:50%;top:64px;right:-24px}
  .tdsh-giallo .tg-drawer__booth{width:44px;right:14px;top:-30px}
  .tdsh-giallo .tg-drawer__x{left:18px;top:16px}
  .tdsh-giallo .tg-drawer :is(.tg-drawer__search,.tg-drawer__ledgers,.tg-drawer__nav,.tg-drawer__social){padding-left:18px;padding-right:18px}
  .tdsh-giallo .tg-drawer__field input{font-size:19px;padding:13px 12px}
  .tdsh-giallo .tg-drawer__field button{font-size:21px;padding:0 13px}
  .tdsh-giallo .tg-drawer__menu>li>a{font-size:27px}
  .tdsh-giallo .tg-drawer__foot{margin-left:18px;margin-right:18px}
}

/* ==========================================================================
   MOTION (item 9): transform/opacity only; all behind no-preference.
   ========================================================================== */
@media (prefers-reduced-motion:no-preference){
  /* drawer slide + scrim fade */
  .tdsh-giallo .tg-drawer{transition:visibility 0s linear .42s}
  .tdsh-giallo .tg-drawer.is-open,.tdsh-giallo .tg-drawer:target{transition:visibility 0s}
  .tdsh-giallo .tg-drawer__scrim{transition:opacity .3s ease}
  .tdsh-giallo .tg-drawer__panel{transition:transform .42s cubic-bezier(.16,.84,.3,1)}
  .tdsh-giallo .tg-drawer.is-open .tg-drawer__head h2{animation:tg-slam .5s cubic-bezier(.2,.9,.3,1.25) .16s both}
  .tdsh-giallo .tg-drawer.is-open .tg-drawer__eye{animation:tg-drop .6s cubic-bezier(.2,.9,.3,1.2) .08s both}

  /* reveal-on-scroll: giallo.js only tags elements that start below the fold */
  html.tg-js .tg-rv{opacity:0;translate:0 26px;transition:opacity .55s ease var(--tg-rv-d,0ms),translate .6s cubic-bezier(.2,.8,.25,1) var(--tg-rv-d,0ms),transform .25s ease}
  html.tg-js .tg-rv.is-in{opacity:1;translate:0 0}

  /* stamp slam: the "individual" scale property composes with each stamp's own rotate() */
  body.tdsh-giallo .single56__header .meta56__category a{animation:tg-slam .46s cubic-bezier(.2,.9,.3,1.3) .12s both}
  body.tdsh-giallo .single56__header .meta56__category a:nth-of-type(2){animation-delay:.24s}
  body.tdsh-ledger .single56__title .tg-lt__date{animation:tg-slam-soft .5s cubic-bezier(.2,.9,.3,1.25) .1s both}
  body.tdsh-front .main_header56 .fox-logo-container::after{animation:tg-slam .5s cubic-bezier(.2,.9,.3,1.3) .3s both}
  .tdsh-giallo .tg-rv.is-in .tg-stamp,.tdsh-giallo .tg-rv.is-in.tg-stamp{animation:tg-slam .42s cubic-bezier(.2,.9,.3,1.3) calc(var(--tg-rv-d,0ms) + .18s) both}
  .tdsh-front .tg-eyebox.is-in .tg-eyebox__cap{animation:tg-slam .45s cubic-bezier(.2,.9,.3,1.3) .35s both}

  /* halftone + misregistration hover on photos (cards, archive tiles) */
  .tdsh-giallo :is(.tg-card__ph,.archive56__main .post56 .thumbnail56){isolation:isolate}
  .tdsh-giallo :is(.tg-card__ph,.archive56__main .post56 .thumbnail56)>:is(img,a){transition:scale .5s cubic-bezier(.2,.8,.25,1)}
  .tdsh-giallo :is(.tg-card,.archive56__main .post56):hover :is(.tg-card__ph,.thumbnail56)>:is(img,a){scale:1.045}
  .tdsh-giallo :is(.tg-card,.archive56__main .post56):hover :is(.tg-card__ph,.thumbnail56)::after{animation:tg-glitch .42s steps(2,end) 1}
  .tdsh-giallo .tg-card,.tdsh-giallo .archive56__main .primary56 .post56{transition:transform .25s ease}
  .tdsh-giallo .tg-card:hover,.tdsh-giallo .archive56__main .primary56 .post56:hover{transform:translate(-3px,-3px)}
  .tdsh-front .tg-strip li a,.tdsh-front .tg-strip__ar{transition:translate .2s ease}
  .tdsh-front .tg-strip li:hover .tg-strip__ar{translate:6px 0}
  .tdsh-giallo .tg-evid__ico{transition:rotate .2s ease}
  .tdsh-giallo .tg-evid:hover .tg-evid__ico{rotate:-12deg}
}
/* the halftone overlay itself (static; only its opacity changes) */
.tdsh-giallo :is(.tg-card__ph,.archive56__main .post56 .thumbnail56)::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(circle at 50% 50%,rgba(10,10,10,.85) 0 1.1px,transparent 1.6px) 0 0/6px 6px,linear-gradient(rgba(228,24,24,.28),rgba(240,200,0,.18));mix-blend-mode:multiply;opacity:0;transition:opacity .3s ease}
.tdsh-giallo :is(.tg-card,.archive56__main .post56):hover :is(.tg-card__ph,.thumbnail56)::after,.tdsh-giallo :is(.tg-card,.archive56__main .post56):focus-within :is(.tg-card__ph,.thumbnail56)::after{opacity:.55}
.tdsh-giallo .archive56__main .primary56 .post56 .thumbnail56::after{z-index:2}

@keyframes tg-slam{0%{opacity:0;scale:1.9}55%{opacity:1;scale:.92}78%{scale:1.04}100%{opacity:1;scale:1}}
@keyframes tg-slam-soft{0%{scale:1.22}60%{scale:.97}100%{scale:1}}
@keyframes tg-drop{0%{opacity:0;translate:0 -24px}100%{opacity:1;translate:0 0}}
@keyframes tg-glitch{0%{opacity:.75;translate:-5px 2px}50%{opacity:.4;translate:4px -2px}100%{opacity:.55;translate:0 0}}

@media (prefers-reduced-motion:reduce){
  .tdsh-giallo .tg-drawer,.tdsh-giallo .tg-drawer__panel,.tdsh-giallo .tg-drawer__scrim,.tdsh-giallo .tg-casetab .tg-evid--tab{transition:none!important}
  .tdsh-giallo :is(.tg-card__ph,.archive56__main .post56 .thumbnail56)::after{transition:none}
}
@media print{.tdsh-giallo .tg-drawer,.tdsh-giallo .tg-casetab,.tdsh-giallo .tg-evid{display:none!important}}
