/* What the homepage, the gallery and a drawing's profile share: chapter heads with a gold eyebrow, drawing cards (the
   drawing on white board in a guide frame, the role's colour along the top, a heart to keep it), hearts that fly, and
   ranks in gold, silver and bronze. */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 10px; font: 900 12.5px/1 var(--text); letter-spacing: .28em; text-transform: uppercase; color: var(--gold); }
.eyebrow::before { content: ""; width: 28px; height: 3px; background: currentColor; transform: skewX(-30deg); }
.lhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin: 70px 0 20px; }
.lhead h2 { color: var(--on-mat); font-size: clamp(27px, 3.5vw, 40px); margin: 0; line-height: 1.05; }
.lhead p { color: var(--on-mat-dim); margin: 8px 0 0; max-width: 64ch; font-size: 16px; }
.lhead .more { flex: none; font-weight: 900; font-size: 15px; color: var(--on-mat); text-decoration: none; border-bottom: 3px solid var(--gold); padding-bottom: 2px; }
.lhead .more:hover { color: var(--gold); }
.lhead .more:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

/* ---- drawing cards ------------------------------------------------------------------------------------------------ */
.dgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px 18px; }
.dcard { --rc: var(--ink); --el: var(--ink); --on: #fff; position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--board); color: var(--ink); border: 3px solid var(--ink); border-top: 8px solid var(--rc); border-radius: 3px; box-shadow: 4px 4px 0 var(--drop); transition: transform .14s cubic-bezier(.2, 1.4, .5, 1), box-shadow .14s; animation: cardin .45s cubic-bezier(.2, 1.3, .5, 1) both; }
.dcard:hover { transform: translate(-3px, -4px) rotate(-.5deg); box-shadow: 7px 8px 0 var(--drop); }
.dcard:focus-within { outline: 3px solid var(--hi); outline-offset: 3px; }
@keyframes cardin { from { transform: translateY(18px) scale(.97); opacity: 0; } }
.dc-art { position: relative; aspect-ratio: 1; overflow: hidden; background: #fff; border-bottom: 3px solid var(--ink); transition: background .3s; }
.dc-art::before { content: ""; position: absolute; inset: 9px; border: 1.5px solid var(--guide); opacity: .5; pointer-events: none; }
.dc-art::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: radial-gradient(circle, rgba(20, 20, 22, .14) 1.1px, transparent 1.3px) 0 0 / 7px 7px; -webkit-mask: linear-gradient(transparent, #000 70%); mask: linear-gradient(transparent, #000 70%); pointer-events: none; }
.dc-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 9%; transition: opacity .25s, transform .3s; }
.dc-live { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; opacity: 0; transition: opacity .25s; }
.dcard.alive .dc-live { opacity: 1; } .dcard.alive .dc-art img { opacity: 0; transform: scale(.94); }
.dcard.alive .dc-art { background: radial-gradient(70% 60% at 50% 62%, color-mix(in srgb, var(--rc) 16%, #fff), #fff 72%); }
.dc-rank { position: absolute; z-index: 2; left: 8px; top: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 5px 9px 4px 7px; background: var(--ink); color: #fff; border: 2px solid var(--ink); font: 400 15px/1 var(--display); transform: rotate(-5deg); box-shadow: 2px 2px 0 rgba(20, 20, 22, .35); }
.dc-rank .ic { width: 15px; height: 15px; }
.dc-rank.m1 { background: var(--gold); color: var(--ink); } .dc-rank.m2 { background: #dfe3ea; color: var(--ink); } .dc-rank.m3 { background: #e5a46b; color: var(--ink); }
.dc-el { position: absolute; z-index: 2; right: 8px; top: 8px; width: 30px; height: 30px; display: grid; place-items: center; background: var(--el); color: var(--on); border: 2.5px solid var(--ink); }
.dc-el .ic { width: 17px; height: 17px; }
.dc-house { position: absolute; z-index: 2; left: 8px; bottom: 8px; padding: 3px 7px 2px; background: var(--ink); color: var(--gold); font: 900 10.5px/1.3 var(--text); letter-spacing: .14em; text-transform: uppercase; }
.dc-info { display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; padding: 9px 11px 11px; min-width: 0; }
.dc-link { color: inherit; text-decoration: none; }
.dc-link::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.dc-link:focus-visible { outline: none; }
.dc-name { display: block; padding-right: 36px; font: 400 17px/1.15 var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-role { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 900; color: var(--rc); }
.dc-role .ic { width: 14px; height: 14px; }
.dc-time { display: inline-grid; margin-left: 3px; } .dc-time .ic { width: 13px; height: 13px; } .dc-time.day { color: #d99a00; } .dc-time.night { color: #4b55a8; }
.dc-stats { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; color: var(--graphite); }
.dc-stats span { display: inline-flex; align-items: center; gap: 4px; } .dc-stats .ic { width: 14px; height: 14px; }
.dc-stats b { color: var(--ink); font-weight: 900; font-variant-numeric: tabular-nums; }
.dc-fav { position: absolute; z-index: 4; right: 9px; bottom: 11px; width: 38px; height: 38px; display: grid; place-items: center; padding: 0; background: var(--board); color: #b9bcc4; border: 2.5px solid var(--ink); border-radius: 50%; box-shadow: 2px 2px 0 var(--drop); cursor: pointer; transition: transform .12s, color .12s, background .12s; }
.dc-fav .ic { width: 19px; height: 19px; }
.dc-fav:hover { color: var(--red); transform: scale(1.08); }
.dc-fav:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.dc-fav.on { background: var(--red); color: #fff; }
.pop { animation: favpop .42s cubic-bezier(.2, 1.8, .5, 1); }
@keyframes favpop { 40% { transform: scale(1.35) rotate(-10deg); } }
.hburst { position: fixed; z-index: 100; width: 0; height: 0; pointer-events: none; }
.hburst i { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; color: var(--red); animation: hfly .8s cubic-bezier(.15, .75, .3, 1) both; }
.hburst i .ic { width: 100%; height: 100%; filter: drop-shadow(1.5px 1.5px 0 var(--ink)); }
@keyframes hfly { from { transform: translate(0, 0) scale(.3); opacity: 1; } 70% { opacity: 1; } to { transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(1.05); opacity: 0; } }

/* a row of cards that scrolls sideways (more by the artist, drawings like it) */
.drow { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(190px, 220px); gap: 18px; overflow-x: auto; padding: 4px 8px 16px 4px; margin: 0 -8px 0 -4px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.drow > * { scroll-snap-align: start; }

/* a big heart button and the other big actions on a profile and the drawing of the day */
.btn.heart { display: inline-flex; align-items: center; gap: 8px; }
.btn.heart .ic { width: 20px; height: 20px; color: var(--red); transition: transform .12s; }
.btn.heart.on { background: var(--red); color: #fff; border-color: var(--ink); }
.btn.heart.on .ic { color: #fff; }
.btn .ic { width: 18px; height: 18px; vertical-align: -3px; }
.btn.gold { background: var(--gold); color: var(--ink); box-shadow: 4px 4px 0 var(--drop); }
.btn.gold:hover { background: #ffd36a; } .btn.gold:active { box-shadow: 1px 1px 0 var(--drop); transform: translate(3px, 3px); }

/* the ribbon over a drawing that ranks: "#2 most loved" */
.ribbon { display: inline-flex; align-items: center; gap: 7px; padding: 6px 16px 5px 12px; background: var(--gold); color: var(--ink); border: 2.5px solid var(--ink); font: 400 14px/1 var(--display); transform: skewX(-12deg); box-shadow: 3px 3px 0 var(--drop); }
.ribbon > * { transform: skewX(12deg); } .ribbon .ic { width: 16px; height: 16px; }
.ribbon.plain { background: var(--ink); color: var(--gold); }

@media (max-width: 720px) {
  .lhead { margin-top: 54px; }
  .dgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
  .dc-name { font-size: 15px; padding-right: 30px; } .dc-info { padding: 7px 9px 9px; gap: 4px; }
  .dc-stats { gap: 3px 9px; font-size: 11.5px; } .dc-fav { width: 34px; height: 34px; right: 7px; bottom: 9px; } .dc-fav .ic { width: 17px; height: 17px; }
  .dc-el { width: 26px; height: 26px; } .dc-rank { font-size: 13px; }
  .drow { grid-auto-columns: minmax(160px, 46vw); gap: 12px; }
}
@media (prefers-reduced-motion: reduce) { .dcard { animation: none; } }

/* shared with the homepage: the role's slanted bar, focus lines, the last call */
.rolebar { display: inline-flex; background: var(--rc); color: #fff; padding: 4px 16px 3px 14px; transform: skewX(-12deg); font-family: var(--display); font-size: 15px; }
.rolebar > span { transform: skewX(12deg); display: inline-flex; gap: 8px; align-items: center; }
.rolebar .ic { width: 16px; height: 16px; }
.rolebar small { font-family: var(--text); font-weight: 700; font-size: 13px; opacity: .92; }
.burst { position: absolute; inset: -45%; pointer-events: none; background: repeating-conic-gradient(from 0deg, rgba(20,20,22,.9) 0deg .7deg, transparent .7deg 4.2deg); -webkit-mask: radial-gradient(circle, transparent 26%, #000 50%); mask: radial-gradient(circle, transparent 26%, #000 50%); opacity: 0; }
.burst.on { animation: burstin 1.2s ease-out forwards; }
@keyframes burstin { 0% { opacity: 0; transform: scale(.7) rotate(0); } 16% { opacity: .6; } 100% { opacity: .1; transform: scale(1.08) rotate(5deg); } }
.finale { position: relative; overflow: hidden; margin-top: 64px; padding: 46px 24px 50px; display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; background: var(--board); color: var(--ink); border: 4px solid var(--ink); border-radius: 3px; box-shadow: 8px 8px 0 var(--drop); }
.finale .burst { opacity: .2; inset: -120% -20%; }
.finale h2 { position: relative; margin: 0; font-size: clamp(26px, 3.8vw, 44px); max-width: 20ch; background: var(--board); padding: 4px 14px; }
.finale .btn { position: relative; } .finale .btn.big { font-size: 21px; padding: 15px 26px; box-shadow: 6px 6px 0 var(--drop); }
.finale .row { position: relative; justify-content: center; gap: 14px; }
.tchip { display: inline-flex; align-items: center; gap: 4px; font-weight: 900; } .tchip .ic { width: 14px; height: 14px; } .tchip.day { color: #c58b00; } .tchip.night { color: #4b55a8; }
@media (max-width: 720px) { .rolebar small { display: none; } .rolebar { font-size: 14px; } }