/* ==========================================================================
   URHEILIJAPROFIILI JUTUSSA — the card in the sidebar          (2.14.0)
   assets/css/athlete-card.css

   The card is in ORDINARY FLOW, inside the sticky column that already holds
   the table of contents. It has no top, no left and no clamp, so there is
   nothing about its position for a scroll handler to compute wrongly — which
   is what went wrong the last three times. The script decides only whether it
   is showing and whose it is; everything below is CSS.

   The photo rules carry !important on purpose: the theme's global
   `img{max-width:100%;height:auto}` is what used to collapse the portrait
   into a corner of its own frame.
   ========================================================================== */

:root{--su-ath-dur:.42s;--su-ath-amp:1}

/* ========================= THE NAME IN THE PROSE =========================
   A marked mention and nothing more. A round portrait after the name was
   tried and it wrecked the typography: an image in the middle of a serif
   line breaks the baseline, the leading and the colour of the paragraph. */
.su-ath-x{font-weight:650;color:inherit;
  border-bottom:1.5px solid var(--su-ath-soft,rgba(10,132,255,.3))}

/* ========================== THE LEFT COLUMN ==============================
   The card lives in the left rail, under the share icons, in that rail's own
   sticky context. It therefore has NO top, NO left and NO clamp of its own —
   which is the whole point. Three earlier versions of this feature computed a
   position from the scroll offset and all three got it wrong; there is now
   nothing for a script to compute.

   The rail is widened to 244px in post-layouts.css and the page's max-width
   grows by the same amount, so the reading column keeps every pixel it had. */
.su-ath-side{margin-top:22px;overflow:hidden;
  max-height:0;opacity:0;transform:translateY(-6px);
  transition:max-height calc(var(--su-ath-dur) * 1.1) cubic-bezier(.22,1,.3,1),
             opacity .24s ease,
             transform var(--su-ath-dur) cubic-bezier(.22,1,.3,1)}
.su-ath-side.is-on{max-height:620px;opacity:1;transform:none}
.su-ath-side.is-out{opacity:0;transform:translateX(calc(-6px * var(--su-ath-amp)))}
.su-ath-side.is-in .su-ath-card{
  animation:suAthIn calc(var(--su-ath-dur) * .9) cubic-bezier(.22,1,.3,1) both}
@keyframes suAthIn{from{opacity:0;transform:translateX(calc(-10px * var(--su-ath-amp))) scale(.99)}
                   to{opacity:1;transform:none}}

/* The rail scrolls internally if a tall card plus the share strip ever exceed
   the screen, rather than growing past the bottom of the viewport. */
.su-pl--e .su-pl-rail{max-height:calc(100vh - var(--su-toc-top,78px) - 24px);
  overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.su-pl--e .su-pl-rail::-webkit-scrollbar{width:0}

/* Below the layout's own breakpoint there is no wide rail, so there is no
   card there either — the article gets the in-flow one instead. The script
   asks the layout (offsetParent) rather than measuring the window, so the two
   can never disagree about which presentation is live. */
@media (max-width:1180px){
  .su-ath-side{display:none}
  .su-pl--e .su-pl-rail{max-height:none;overflow:visible}
}

/* ================================= THE CARD ============================== */
.su-ath-card{position:relative;display:block;border-radius:18px;overflow:hidden;color:#fff;
  isolation:isolate;background:#0B0E13;text-align:left;
  font-family:Inter,system-ui,-apple-system,sans-serif;font-size:14px;line-height:1.4;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 1px 0 rgba(255,255,255,.07) inset,0 26px 54px -26px rgba(0,0,0,.75)}

/* the club's colour, drawn across the top as the card settles */
.su-ath-card::before{content:'';position:absolute;left:0;top:0;height:3px;width:100%;z-index:9;
  background:linear-gradient(90deg,var(--su-ath-c),var(--su-ath-lite));
  transform:scaleX(0);transform-origin:left;
  transition:transform calc(var(--su-ath-dur) * 1.4) cubic-bezier(.22,1,.3,1)}
.su-ath-side.is-on .su-ath-card::before,
.su-ath-open .su-ath-sheet .su-ath-card::before{transform:scaleX(1)}

/* --------------------------------------------------------------- the portrait
   The frame states one ratio; the image is taken out of flow and told to fill
   it outright. A portrait that does not fill its frame is the single most
   visible defect a profile card can have, and `img{height:auto}` is what was
   causing it. Cropped at 18% from the top, where a sports photograph puts the
   face. */
.su-ath-card__pic{position:relative;display:block;overflow:hidden;
  aspect-ratio:1/1;width:100%;
  background:linear-gradient(158deg,var(--su-ath-c),var(--su-ath-ink))}
.su-ath-card__pic > img{position:absolute !important;inset:0 !important;z-index:1;
  width:100% !important;height:100% !important;
  max-width:none !important;max-height:none !important;min-width:0 !important;
  margin:0 !important;border-radius:0 !important;
  object-fit:cover !important;object-position:center 18% !important;display:block;
  animation:suAthDrift calc(20s / var(--su-ath-amp)) ease-in-out infinite alternate}
@keyframes suAthDrift{from{transform:scale(1)}to{transform:scale(1.05)}}

/* no photograph: the initials get the identical frame, so a missing picture
   never changes the shape of the card */
.su-ath-card__pic .ini{position:absolute;inset:0;z-index:1;display:grid;place-items:center;
  font-family:'Source Serif 4',Georgia,serif;font-size:52px;font-weight:800;
  letter-spacing:-.04em;color:rgba(255,255,255,.9)}

.su-ath-card__pic .fade{position:absolute;left:0;right:0;bottom:0;z-index:3;height:74%;
  pointer-events:none;
  background:linear-gradient(to top,#0B0E13 4%,rgba(11,14,19,.86) 34%,transparent 100%)}
.su-ath-card__pic .glow{position:absolute;inset:0;z-index:2;pointer-events:none;
  mix-blend-mode:soft-light;
  background:radial-gradient(76% 62% at 22% 8%,var(--su-ath-lite),transparent 66%)}
.su-ath-card__pic .sheen{position:absolute;top:0;bottom:0;width:46%;z-index:4;
  pointer-events:none;opacity:0;left:-46%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.2),transparent)}
.su-ath-side.is-on .su-ath-card__pic .sheen,
.su-ath-open .su-ath-sheet .su-ath-card__pic .sheen{
  animation:suAthSweep calc(var(--su-ath-dur) * 2.1) cubic-bezier(.3,.7,.3,1) .14s 1 both}
@keyframes suAthSweep{0%{left:-46%;opacity:0}22%{opacity:1}100%{left:120%;opacity:0}}

.su-ath-card__pic .flag{position:absolute;left:10px;top:10px;z-index:6;
  display:inline-flex;align-items:center;gap:5px;
  font-size:9px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#fff;
  background:rgba(8,10,14,.58);border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(7px);padding:4px 8px;border-radius:100px}

/* the shirt number, and ONLY when there is a real one */
.su-ath-card__pic .jersey{position:absolute;right:10px;top:10px;z-index:6;
  font-family:'Source Serif 4',Georgia,serif;font-size:14px;font-weight:800;line-height:1;
  color:#fff;background:var(--su-ath-c);padding:6px 9px;border-radius:9px;
  box-shadow:0 4px 12px -5px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.28)}

/* ------------------------------------------------- the name, over the picture */
.su-ath-id{position:absolute;left:0;right:0;bottom:0;z-index:7;display:block;padding:0 14px 12px}
.su-ath-kick{display:inline-block;font-size:9px;letter-spacing:.15em;text-transform:uppercase;
  font-weight:800;color:var(--su-ath-lite);margin-bottom:5px;
  border-left:2px solid var(--su-ath-c);padding-left:6px}
.su-ath-name{display:block;font-family:'Source Serif 4',Georgia,serif;font-weight:800;
  letter-spacing:-.025em;line-height:.98}
.su-ath-name .g{display:block;font-size:13px;font-weight:600;letter-spacing:.005em;
  color:rgba(255,255,255,.66);margin-bottom:1px}
.su-ath-name .s{display:block;font-size:25px;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.45)}

/* --------------------------------------------------------------- the details */
.su-ath-card__body{position:relative;z-index:6;display:block;padding:11px 14px 13px}

.su-ath-club{display:flex;align-items:center;gap:7px;min-width:0;
  font-size:11.5px;font-weight:600;color:rgba(255,255,255,.66)}
.su-ath-club .dot{flex:0 0 auto;width:7px;height:7px;border-radius:50%;
  background:var(--su-ath-c);box-shadow:0 0 0 3px var(--su-ath-soft)}
.su-ath-club .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.su-ath-pos{flex:0 0 auto;margin-left:auto;font-size:9px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--su-ath-lite);background:var(--su-ath-soft);
  border:1px solid rgba(255,255,255,.14);padding:3px 7px;border-radius:6px}

/* three figures on one ruled row. Boxes around each number made three small
   cards inside a card; hairlines say the same thing and stay quiet. */
.su-ath-stats{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;margin:11px 0 0;
  border-top:1px solid rgba(255,255,255,.09);border-bottom:1px solid rgba(255,255,255,.09)}
.su-ath-stat{position:relative;overflow:hidden;display:block;padding:9px 2px;text-align:center}
.su-ath-stat + .su-ath-stat{border-left:1px solid rgba(255,255,255,.09)}
.su-ath-stat b{display:block;font-family:'Source Serif 4',Georgia,serif;font-size:19px;
  font-weight:800;line-height:1.04;font-variant-numeric:tabular-nums;color:#fff}
.su-ath-stat i{font-style:normal;font-size:8px;letter-spacing:.08em;text-transform:uppercase;
  display:block;margin-top:3px;color:rgba(255,255,255,.44);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.su-ath-stat::after{content:'';position:absolute;left:0;bottom:-1px;height:2px;width:100%;
  background:var(--su-ath-c);transform:scaleX(0);transform-origin:left;
  transition:transform calc(var(--su-ath-dur) * 1.7) cubic-bezier(.22,1,.3,1)}
.su-ath-side.is-on .su-ath-stat::after,
.su-ath-open .su-ath-sheet .su-ath-stat::after{transform:scaleX(1)}
.su-ath-side.is-on .su-ath-stat:nth-child(2)::after{transition-delay:.07s}
.su-ath-side.is-on .su-ath-stat:nth-child(3)::after{transition-delay:.14s}

.su-ath-phys{display:flex;gap:5px;flex-wrap:wrap;margin-top:10px}
.su-ath-phys span{font-size:10px;font-weight:600;color:rgba(255,255,255,.6);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);
  padding:3px 8px;border-radius:6px;font-variant-numeric:tabular-nums}

.su-ath-go{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:11px;
  border-radius:10px;padding:10px 12px;font-size:12.5px;font-weight:700;
  text-decoration:none;color:#fff;border-bottom:0;
  background:linear-gradient(120deg,var(--su-ath-c),var(--su-ath-ink));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24);transition:filter .16s ease}
.su-ath-go:hover,.su-ath-go:focus{filter:brightness(1.12);color:#fff}
.su-ath-go .arw{flex:0 0 auto;transition:transform .2s cubic-bezier(.22,1,.3,1)}
.su-ath-go:hover .arw{transform:translateX(4px)}


/* ======================= THE MARKER (PHONES) =============================
   SIGNED OFF, AND IT MUST NOT DRIFT AGAIN.

   RESERVED, NOT BORROWED. The body's right padding IS the marker's width, so
   no line of text is ever underneath it and nothing shifts when it comes and
   goes. The first attempt floated a bar over the text and covered the line
   being read; this is the fix for that. A static card in the flow of the
   article replaced this once by mistake — that is not this.
   ========================================================================= */
.su-ath-gutter{padding-right:62px}
.su-ath-mark{position:fixed;z-index:60;width:46px;opacity:0;pointer-events:none;
  transform:translateX(16px) scale(.9);
  transition:opacity .24s ease,transform var(--su-ath-dur) cubic-bezier(.22,1,.3,1),
             top calc(var(--su-ath-dur) * 1.2) cubic-bezier(.22,1,.3,1)}
html:not([data-su-ath-mode="marker"]) .su-ath-mark{display:none}
.su-ath-mark.is-on{opacity:1;transform:none;pointer-events:auto}
.su-ath-mark__face{position:relative;width:46px;height:46px;border-radius:50%;display:grid;
  place-items:center;border:0;padding:0;overflow:visible;cursor:pointer;
  font-weight:800;font-size:14px;color:#fff;
  background:linear-gradient(145deg,var(--su-ath-c),var(--su-ath-ink));
  box-shadow:0 0 0 2.5px var(--paper,#fff),0 0 0 4px var(--su-ath-c),
             0 8px 18px -8px var(--su-ath-soft);
  transition:transform .2s cubic-bezier(.22,1.6,.4,1)}
.su-ath-mark__face:active{transform:scale(.9)}
.su-ath-mark__face img{width:46px;height:46px;border-radius:50%;object-fit:cover}
/* a small "+" so the marker reads as a control and not as a dot */
.su-ath-mark__face::after{content:'';position:absolute;right:-2px;bottom:-2px;width:17px;height:17px;
  border-radius:50%;background:var(--paper,#fff);box-shadow:0 1px 3px rgba(0,0,0,.28)}
.su-ath-mark__face::before{content:'+';position:absolute;right:1px;bottom:-4px;z-index:2;
  font-size:14px;font-weight:800;color:var(--su-ath-ink);line-height:1}
.su-ath-mark__face .n{position:absolute;top:-4px;right:-4px;z-index:3;min-width:17px;height:17px;
  border-radius:100px;background:var(--su-ath-c);color:#fff;font-size:9.5px;font-weight:800;
  display:grid;place-items:center;border:2px solid var(--paper,#fff);padding:0 4px}
.su-ath-mark__face .ring{position:absolute;inset:-6px;border-radius:50%;
  border:1.5px solid var(--su-ath-c);opacity:.3;
  animation:suAthPulse calc(2.8s / var(--su-ath-amp)) ease-in-out infinite}
@keyframes suAthPulse{0%,100%{transform:scale(.92);opacity:.14}50%{transform:scale(1);opacity:.38}}
/* a hairline back to the text, so the marker reads as "this name, here" */
.su-ath-mark__tie{position:absolute;right:46px;top:23px;width:14px;height:1.5px;
  background:var(--su-ath-c);opacity:.45;transform-origin:right;transform:scaleX(0);
  transition:transform var(--su-ath-dur) cubic-bezier(.22,1,.3,1) .1s}
.su-ath-mark.is-on .su-ath-mark__tie{transform:scaleX(1)}
.su-ath-mark__tag{display:block;margin-top:5px;font-size:8.5px;font-weight:800;text-align:center;
  line-height:1.15;text-transform:uppercase;color:var(--su-ath-ink)}

/* the marked name lights up while it is the one the marker points at */
.su-ath-x.is-live{border-bottom-color:var(--su-ath-c);color:var(--su-ath-c);
  background:linear-gradient(transparent 62%,var(--su-ath-soft) 0)}
html[data-su-ath-mode="marker"] .su-ath-x{cursor:pointer}

/* ======================== THE PANEL AND ITS BACKDROP =====================
   Opening the card is a deliberate act, so it looks like one: the article
   dims behind a backdrop and stops scrolling, and one tap anywhere puts the
   reader back exactly where they were. */
.su-ath-scrim{position:fixed;inset:0;z-index:98;background:rgba(6,8,11,.55);
  backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .28s ease}
.su-ath-open .su-ath-scrim{opacity:1;pointer-events:auto}
.su-ath-open{overflow:hidden}

.su-ath-wash{position:fixed;z-index:99;border-radius:50%;width:24px;height:24px;
  background:var(--su-ath-c);opacity:0;pointer-events:none;
  transform:translate(-50%,-50%) scale(1);
  transition:transform calc(var(--su-ath-dur)*1.1) cubic-bezier(.3,.9,.3,1),opacity .34s ease}
.su-ath-open .su-ath-wash{opacity:.16;transform:translate(-50%,-50%) scale(46)}

.su-ath-sheet{position:fixed;left:10px;right:10px;bottom:10px;z-index:100;max-width:440px;
  margin:0 auto;border-radius:22px;overflow:hidden;color:#fff;background:#0B0E13;
  border:1px solid rgba(255,255,255,.12);box-shadow:0 -10px 50px -12px rgba(0,0,0,.75);
  transform-origin:var(--su-ath-ox,50%) var(--su-ath-oy,100%);
  transform:scale(.2) translateY(6px);opacity:0;pointer-events:none;
  transition:transform calc(var(--su-ath-dur)*1.05) cubic-bezier(.2,1.05,.3,1),opacity .26s ease}
.su-ath-open .su-ath-sheet{transform:none;opacity:1;pointer-events:auto}
.su-ath-sheet .su-ath-card{border:0;border-radius:22px 22px 0 0;box-shadow:none}
.su-ath-sheet .su-ath-card__pic{aspect-ratio:16/11}
.su-ath-sheet .su-ath-name .s{font-size:29px}
.su-ath-sheet__grip{position:absolute;left:50%;top:9px;z-index:12;transform:translateX(-50%);
  width:40px;height:4px;border-radius:100px;background:rgba(255,255,255,.45);cursor:pointer}
.su-ath-close{display:block;width:calc(100% - 28px);margin:0 14px 14px;padding:11px;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:#fff;
  border-radius:11px;font:700 12.5px/1 Inter,system-ui,sans-serif;cursor:pointer}
.su-ath-close:hover{background:rgba(255,255,255,.11)}

@media (max-width:380px){
  .su-ath-gutter{padding-right:56px}
  .su-ath-sheet .su-ath-name .s{font-size:25px}
}

/* --------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion:reduce){
  .su-ath-side,.su-ath-side .su-ath-card,.su-ath-stat::after,.su-ath-card::before,
  .su-ath-mark,.su-ath-sheet,.su-ath-wash{
    transition-duration:.001s!important;animation:none!important}
  .su-ath-card__pic > img,.su-ath-card__pic .sheen,
  .su-ath-mark__face .ring{animation:none!important}
}