/* Layout: a training-log notebook laid out as a 12-column bento — paper tiles with hand marks, one flag tile, splits and season as working instruments */
:root{
  --paper:#eceeeb; --card:#f7f8f5; --ink:#151a2c; --muted:#5a6276; --rule:#d3d7d6;
  --red:#ad2a3a; --navy:#25325f; --ice:#8eabc8; --ice-soft:#dfe7ee; --on-red:#fbf7f6;
  --shadow:0 1px 0 rgba(21,26,44,.06), 0 14px 30px -18px rgba(21,26,44,.28);
  --grain-op:.5;
  --display:"Gloock", "Iowan Old Style", Georgia, serif;
  --body:"Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, Menlo, monospace;
  --hand:"Kalam", "Segoe Print", "Bradley Hand", cursive;
  --step--1:clamp(.8rem, .77rem + .15vw, .9rem);
  --step-0:clamp(.98rem, .94rem + .2vw, 1.1rem);
  --step-1:clamp(1.2rem, 1.1rem + .5vw, 1.5rem);
  --step-2:clamp(1.6rem, 1.3rem + 1.3vw, 2.4rem);
  --step-3:clamp(2.4rem, 1.7rem + 3.2vw, 4.6rem);
  --step-4:clamp(3rem, 1.8rem + 5.6vw, 7.2rem);
  --gap:clamp(10px, 1.2vw, 16px);
  --ease:cubic-bezier(.2,.8,.2,1);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --paper:#0d111b; --card:#151a27; --ink:#e7eaef; --muted:#959db0; --rule:#283043;
  --red:#e0566a; --navy:#aab8e6; --ice:#7f9dbf; --ice-soft:#1d2536; --on-red:#1a0d10;
  --shadow:0 1px 0 rgba(0,0,0,.4), 0 18px 34px -20px rgba(0,0,0,.8); --grain-op:.35; color-scheme:dark } }
:root[data-theme="dark"]{
  --paper:#0d111b; --card:#151a27; --ink:#e7eaef; --muted:#959db0; --rule:#283043;
  --red:#e0566a; --navy:#aab8e6; --ice:#7f9dbf; --ice-soft:#1d2536; --on-red:#1a0d10;
  --shadow:0 1px 0 rgba(0,0,0,.4), 0 18px 34px -20px rgba(0,0,0,.8); --grain-op:.35; color-scheme:dark }

*,*::before,*::after{box-sizing:border-box}
body{background:var(--paper); color:var(--ink); font-family:var(--body); font-size:var(--step-0); line-height:1.55;
  padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px));
  transition:background-color .4s var(--ease), color .4s var(--ease); -webkit-font-smoothing:antialiased}
/* paper grain */
body::after{content:""; position:fixed; inset:0; pointer-events:none; z-index:50; opacity:var(--grain-op); mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
:root[data-theme="dark"] body::after{mix-blend-mode:screen}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) body::after{mix-blend-mode:screen} }

a{color:inherit}
:focus-visible{outline:2px solid var(--red); outline-offset:3px; border-radius:6px}
.wrap{max-width:1280px; margin-inline:auto}

/* top bar */
.top{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-block:22px 18px}
.mark{display:flex; align-items:baseline; gap:10px; text-decoration:none}
.mark b{font-family:var(--display); font-weight:400; font-size:var(--step-1); letter-spacing:-.01em}
.mark span{font-family:var(--hand); color:var(--red); font-size:1rem; transform:rotate(-4deg); display:inline-block}
.nav{display:flex; align-items:center; gap:clamp(12px,2vw,26px); flex-wrap:wrap}
.nav a{text-decoration:none; font-size:var(--step--1); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); position:relative; padding-block:4px}
.nav a::after{content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--red); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease); border-radius:2px}
.nav a:hover{color:var(--ink)} .nav a:hover::after{transform:scaleX(1)}
.theme{appearance:none; border:1px solid var(--rule); background:var(--card); color:var(--ink); width:40px; height:40px; border-radius:50% 46% 52% 48%;
  display:grid; place-items:center; cursor:pointer; transition:transform .5s var(--ease), border-color .3s}
.theme:hover{transform:rotate(-24deg); border-color:var(--ink)}
.theme svg{width:18px; height:18px}
.theme .moon{display:none}
:root[data-theme="dark"] .theme .sun{display:none} :root[data-theme="dark"] .theme .moon{display:block}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .theme .sun{display:none} :root:not([data-theme="light"]) .theme .moon{display:block} }

/* bento */
.bento{display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:var(--gap); padding-block:4px 40px}
.tile{position:relative; background:var(--card); border:1px solid var(--rule); box-shadow:var(--shadow); padding:clamp(18px,2.2vw,30px);
  min-width:0; overflow:hidden; transform:perspective(900px) rotateX(var(--rx,0)) rotateY(var(--ry,0)) translateY(var(--ty,0));
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .3s, background-color .4s var(--ease)}
.tile:hover{--ty:-3px; border-color:color-mix(in srgb, var(--ink) 22%, var(--rule))}
/* each tile cut a little differently, like torn card stock */
.r1{border-radius:26px 20px 28px 18px} .r2{border-radius:18px 28px 20px 26px} .r3{border-radius:22px 18px 24px 30px} .r4{border-radius:30px 22px 18px 24px}
.label{font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); display:flex; gap:10px; align-items:center; margin:0 0 14px}
.label::before{content:""; width:14px; height:1px; background:currentColor}
.hand{font-family:var(--hand); color:var(--red); line-height:1.15}
h1,h2,h3{font-family:var(--display); font-weight:400; margin:0; text-wrap:balance; letter-spacing:-.015em}

.t-hero{grid-column:span 8; grid-row:span 2; display:flex; flex-direction:column; justify-content:space-between; gap:28px; min-height:clamp(420px, 46vw, 600px)}
.t-hero h1{font-size:var(--step-4); line-height:.94; max-width:11ch}
.t-hero h1 em{font-style:italic; position:relative; white-space:nowrap}
.t-hero h1 em svg{position:absolute; left:-3%; bottom:-.1em; width:106%; height:.32em; overflow:visible}
.t-hero h1 em path{fill:none; stroke:var(--red); stroke-width:5; stroke-linecap:round; stroke-dasharray:420; stroke-dashoffset:0; animation:draw 1.4s .4s var(--ease) both}
@keyframes draw{from{stroke-dashoffset:420}to{stroke-dashoffset:0}}
.hero-foot{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap}
.hero-foot p{max-width:42ch; margin:0; color:var(--muted)}
.hero-note{position:absolute; top:clamp(20px,3vw,34px); right:clamp(20px,3vw,34px); font-size:1.1rem; transform:rotate(5deg); text-align:right; max-width:13ch}
.hero-note::after{content:""; display:block; margin:6px 0 0 auto; width:40px; height:24px;
  background:no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 24'><path d='M36 2 C30 14 18 20 4 20 M4 20 l7-6 M4 20 l8 3' fill='none' stroke='%23ad2a3a' stroke-width='2' stroke-linecap='round'/></svg>")}

.btns{display:flex; gap:10px; flex-wrap:wrap}
.btn{--fill:var(--ink); position:relative; isolation:isolate; overflow:hidden; display:inline-flex; align-items:center; gap:10px; padding:13px 20px 12px;
  border:1.5px solid var(--ink); border-radius:999px 980px 999px 960px; background:transparent; color:var(--ink); font:600 var(--step--1)/1 var(--body);
  letter-spacing:.06em; text-transform:uppercase; text-decoration:none; cursor:pointer; transition:color .35s var(--ease), transform .2s var(--ease)}
.btn::before{content:""; position:absolute; inset:-2px; z-index:-1; background:var(--fill); border-radius:inherit; transform:translateY(102%); transition:transform .45s var(--ease)}
.btn:hover{color:var(--card)} .btn:hover::before{transform:translateY(0)}
.btn:active{transform:scale(.97)}
.btn .arr{display:inline-block; transition:transform .35s var(--ease)} .btn:hover .arr{transform:translateX(4px) rotate(-8deg)}
.btn.solid{background:var(--red); border-color:var(--red); color:var(--on-red); --fill:var(--ink)}
.btn.solid:hover{color:var(--card); border-color:var(--ink)}

.t-flag{grid-column:span 4; grid-row:span 2; padding:0; background:#070a14; display:flex; flex-direction:column; justify-content:flex-end}
.t-flag video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.25); transition:transform 1.2s var(--ease)}
.t-flag:hover video{transform:scale(1.32)}
.t-flag .cap{position:relative; padding:22px; color:#eef1f6; background:linear-gradient(to top, rgba(7,10,20,.88), rgba(7,10,20,0))}
.t-flag .cap .label{color:#aab4c6}
.t-flag .cap p{margin:0; font-family:var(--display); font-size:var(--step-2); line-height:1.05}

/* splits instrument */
.t-splits{grid-column:span 7}
.split-head{display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; margin-bottom:22px}
.split-head h2{font-size:var(--step-2)}
.seg{position:relative; display:inline-grid; grid-auto-flow:column; grid-auto-columns:1fr; border:1px solid var(--rule); border-radius:999px; padding:3px; background:var(--paper)}
.seg button{position:relative; z-index:1; appearance:none; border:0; background:none; color:var(--muted); font:500 .8rem/1 var(--mono); padding:9px 14px; cursor:pointer; border-radius:999px; transition:color .3s}
.seg button[aria-pressed="true"]{color:var(--card)}
.seg i{position:absolute; z-index:0; top:3px; bottom:3px; left:3px; border-radius:999px; background:var(--ink); transition:transform .45s var(--ease), width .45s var(--ease)}
.total{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:18px}
.total b{font-family:var(--mono); font-weight:500; font-size:var(--step-3); letter-spacing:-.03em; font-variant-numeric:tabular-nums; line-height:1}
.total .hand{font-size:1.15rem; transform:rotate(-3deg)}
.laps{display:grid; gap:10px}
.lap{display:grid; grid-template-columns:68px minmax(0,1fr) 64px; align-items:center; gap:12px; font-family:var(--mono); font-size:.82rem; font-variant-numeric:tabular-nums}
.lap span:first-child{color:var(--muted)}
.lap span:last-child{text-align:right}
.bar{height:10px; background:var(--ice-soft); border-radius:6px 3px 6px 4px; overflow:hidden}
.bar i{display:block; height:100%; width:var(--w,0%); background:var(--navy); border-radius:inherit; transition:width .7s var(--ease)}
.lap.fast .bar i{background:var(--red)}
.foot-note{margin:16px 0 0; font-size:var(--step--1); color:var(--muted)}

.t-pb{grid-column:span 5; display:flex; flex-direction:column; justify-content:space-between; gap:18px}
.pbs{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px}
.pb{border-top:1px solid var(--rule); padding-top:12px}
.pb small{display:block; font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; color:var(--muted); text-transform:uppercase}
.pb b{display:block; font-family:var(--display); font-weight:400; font-size:var(--step-2); line-height:1.1; font-variant-numeric:tabular-nums}
.t-pb .hand{font-size:1.2rem; align-self:flex-start; transform:rotate(-2deg)}

.t-quote{grid-column:span 5; background:var(--navy); color:var(--card); border-color:transparent}
.t-quote .label{color:color-mix(in srgb, var(--card) 70%, transparent)}
.t-quote blockquote{margin:0; font-family:var(--display); font-size:var(--step-2); line-height:1.12}
.t-quote blockquote::before{content:"\201C"; display:block; font-size:3.4em; line-height:.6; color:var(--red); margin-bottom:6px}
.t-quote cite{display:block; margin-top:18px; font-style:normal; font-family:var(--hand); font-size:1.15rem; color:color-mix(in srgb, var(--card) 80%, transparent)}

.t-season{grid-column:span 7}
.t-season h2{font-size:var(--step-2); margin-bottom:20px}
.phases{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px}
.phase{padding:14px; border:1px dashed var(--rule); border-radius:16px 12px 18px 10px; transition:border-color .3s, background-color .3s; min-width:0}
.phase:hover{border-color:var(--ink)}
.phase small{font-family:var(--mono); font-size:.72rem; color:var(--muted); letter-spacing:.08em}
.phase h3{font-size:var(--step-1); margin:6px 0 4px}
.phase p{margin:0; font-size:var(--step--1); color:var(--muted)}
.phase.now{background:var(--ice-soft); border-style:solid; border-color:var(--ice)}
.phase.now small{color:var(--red)}
.phase.now small::after{content:" · now"; font-family:var(--hand); font-size:1rem}

.t-journal{grid-column:span 7}
.t-journal h2{font-size:var(--step-2); margin-bottom:8px}
.entries{list-style:none; margin:0; padding:0}
.entries a{display:grid; grid-template-columns:86px minmax(0,1fr) 24px; gap:14px; align-items:baseline; padding:16px 0; border-bottom:1px solid var(--rule); text-decoration:none}
.entries time{font-family:var(--mono); font-size:.75rem; color:var(--muted); letter-spacing:.06em}
.entries strong{font-family:var(--display); font-weight:400; font-size:var(--step-1); line-height:1.2; background:linear-gradient(var(--red),var(--red)) no-repeat 0 100%/0 2px; transition:background-size .45s var(--ease)}
.entries .go{opacity:0; transform:translateX(-6px); transition:opacity .3s, transform .35s var(--ease); color:var(--red)}
.entries a:hover strong{background-size:100% 2px}
.entries a:hover .go{opacity:1; transform:none}

.t-partner{grid-column:span 5; background:var(--red); color:var(--on-red); border-color:transparent; display:flex; flex-direction:column; justify-content:space-between; gap:22px}
.t-partner .label{color:color-mix(in srgb, var(--on-red) 75%, transparent)}
.t-partner h2{font-size:var(--step-3); line-height:.96}
.t-partner p{margin:0; max-width:36ch}
.t-partner .btn{border-color:var(--on-red); color:var(--on-red); --fill:var(--on-red)}
.t-partner .btn:hover{color:var(--red)}

.t-contact{grid-column:span 12; display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:28px; align-items:end}
.t-contact h2{font-size:var(--step-3); line-height:1}
.mailrow{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:18px}
.mail{font-family:var(--mono); font-size:var(--step-0); padding:12px 16px; border:1px dashed var(--rule); border-radius:12px 16px 10px 14px; user-select:all; overflow-wrap:anywhere}
.socials{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end}
.chip{display:inline-flex; gap:8px; align-items:center; padding:10px 16px; border:1px solid var(--rule); border-radius:999px; text-decoration:none; font-size:var(--step--1); transition:transform .3s var(--ease), border-color .3s, background-color .3s}
.chip:hover{transform:translateY(-2px) rotate(-1.5deg); border-color:var(--ink); background:var(--paper)}
.chip:nth-child(2):hover{transform:translateY(-2px) rotate(1.5deg)}
.toast{font-family:var(--hand); color:var(--red); font-size:1.1rem; min-width:7ch}

.foot{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-block:0 34px; color:var(--muted); font-size:var(--step--1)}
.foot .hand{font-size:1.05rem}

@media (max-width: 1020px){
  .t-hero{grid-column:span 12; grid-row:auto}
  .t-flag{grid-column:span 12; grid-row:auto; min-height:300px}
  .t-splits,.t-season,.t-journal{grid-column:span 12}
  .t-pb,.t-quote,.t-partner{grid-column:span 6}
  .t-quote{grid-column:span 6}
}
@media (max-width: 680px){
  .bento > .tile{grid-column:1 / -1}
  .phases{grid-template-columns:repeat(2, minmax(0,1fr))}
  .t-contact{grid-template-columns:1fr}
  .socials{justify-content:flex-start}
  .hero-note{position:static; transform:rotate(-2deg); text-align:left; max-width:none}
  .hero-note::after{display:none}
  .lap{grid-template-columns:54px minmax(0,1fr) 56px}
  .entries a{grid-template-columns:70px minmax(0,1fr)} .entries .go{display:none}
  .pbs{grid-template-columns:1fr 1fr 1fr}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important; transition:none!important}
  .tile{transform:none!important}
}

/* Piper additions */
.t-disc{grid-column:span 7}
.disc-body{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:24px; align-items:end}
.disc-big b{font-family:var(--display); font-weight:400; font-size:var(--step-3); line-height:.95; display:block}
.disc-big .hand{font-size:1.15rem; display:inline-block; transform:rotate(-3deg); margin-top:8px}
.disc-copy{margin:0; color:var(--muted); max-width:42ch}
.disc-tag{display:inline-block; margin-top:14px; font-family:var(--mono); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; padding:6px 10px; border:1px solid var(--rule); border-radius:999px}
.disc-panel{transition:opacity .35s var(--ease), transform .45s var(--ease)}
.disc-panel.swap{opacity:0; transform:translateY(6px)}
.t-photo{grid-column:span 5; min-height:320px; display:flex; flex-direction:column; justify-content:flex-end; background:
  repeating-linear-gradient(-45deg, transparent 0 14px, color-mix(in srgb, var(--rule) 55%, transparent) 14px 15px), var(--card)}
.t-photo .frame{position:absolute; inset:16px; border:1.5px dashed var(--rule); border-radius:18px 24px 16px 22px; display:grid; place-items:center; text-align:center; padding:20px}
.t-photo .frame span{font-family:var(--display); font-size:var(--step-3); color:color-mix(in srgb, var(--ink) 18%, transparent); line-height:1}
.t-photo .frame .hand{font-size:1.1rem; color:var(--red); transform:rotate(-3deg); display:block; margin-top:10px}
.t-photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.t-miles{grid-column:span 7}
.t-miles h2{font-size:var(--step-2); margin-bottom:16px}
.miles{list-style:none; margin:0; padding:0; display:grid}
.miles li{display:grid; grid-template-columns:118px minmax(0,1fr); gap:16px; padding:14px 0; border-top:1px solid var(--rule); position:relative}
.miles li:first-child{border-top:0}
.miles time, .miles .when{font-family:var(--mono); font-size:.76rem; letter-spacing:.06em; color:var(--muted); padding-top:3px}
.miles strong{font-family:var(--display); font-weight:400; font-size:var(--step-1); line-height:1.2; display:block}
.miles p{margin:4px 0 0; color:var(--muted); font-size:var(--step--1)}
.miles li.key .when{color:var(--red)}
.miles li.key strong::after{content:" ★"; color:var(--red); font-size:.8em}
.t-tracks{grid-column:span 7}
.t-tracks h2{font-size:var(--step-2); margin-bottom:18px}
.tracks{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px}
.track{padding:16px; border:1px dashed var(--rule); border-radius:16px 12px 18px 10px; transition:border-color .3s, transform .35s var(--ease); min-width:0}
.track:hover{border-color:var(--ink); transform:translateY(-2px) rotate(-.6deg)}
.track small{font-family:var(--mono); font-size:.72rem; color:var(--muted); letter-spacing:.08em; text-transform:uppercase}
.track h3{font-size:var(--step-1); margin:6px 0 4px; line-height:1.15}
.track p{margin:0; font-size:var(--step--1); color:var(--muted)}
.t-family{grid-column:span 5}
.t-family h2{font-size:var(--step-2); margin-bottom:12px}
.t-family p{margin:0; color:var(--muted)}
.fam-stats{display:flex; gap:22px; flex-wrap:wrap; margin-top:18px}
.fam-stats b{font-family:var(--display); font-weight:400; font-size:var(--step-3); line-height:1; display:block; font-variant-numeric:tabular-nums}
.fam-stats small{font-family:var(--mono); font-size:.72rem; color:var(--muted); letter-spacing:.08em; text-transform:uppercase}
.t-press{grid-column:span 7}
.t-press h2{font-size:var(--step-2); margin-bottom:8px}
.entries .src{font-family:var(--mono); font-size:.75rem; color:var(--muted); letter-spacing:.06em}
@media (max-width:1020px){ .t-disc,.t-miles,.t-tracks,.t-press{grid-column:span 12} .t-photo,.t-family{grid-column:span 6} }
@media (max-width:680px){ .disc-body{grid-template-columns:1fr} .tracks{grid-template-columns:1fr} .miles li{grid-template-columns:1fr; gap:4px} }

/* inner pages / posts */
.page-wrap{padding-block:8px 48px}
.article{max-width:72ch;margin-inline:auto;background:var(--card);border:1px solid var(--rule);border-radius:26px 20px 28px 18px;box-shadow:var(--shadow);padding:clamp(22px,4vw,48px)}
.article h1{font-size:var(--step-3);line-height:1;margin-bottom:12px}
.article .meta{font-family:var(--mono);font-size:.75rem;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.article .content{margin-top:22px}
.article .content img{height:auto;border-radius:14px}
.article .content a{color:var(--red)}
.post-list{list-style:none;margin:0;padding:0}
.post-list li{border-bottom:1px solid var(--rule);padding:18px 0}
.post-list a{font-family:var(--display);font-size:var(--step-1);text-decoration:none}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}
body{margin:0}
:root{padding-block:env(safe-area-inset-top,0px) env(safe-area-inset-bottom,0px)}

/* social media buttons (contact tile) */
.socials-wrap{display:flex;flex-direction:column;align-items:flex-end;gap:2px;min-width:0}
.socials-wrap .label{margin-bottom:10px}
.socials{list-style:none;margin:0;padding:0;display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.social{--brand:var(--ink);position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:10px;
  padding:11px 18px 11px 14px;border:1.5px solid var(--rule);border-radius:999px 960px 999px 980px;background:var(--card);color:var(--ink);
  text-decoration:none;font:600 var(--step--1)/1 var(--body);letter-spacing:.04em;
  transition:color .35s var(--ease),border-color .3s,transform .3s var(--ease)}
.social::before{content:"";position:absolute;inset:-2px;z-index:-1;background:var(--brand);border-radius:inherit;transform:translateY(102%);transition:transform .45s var(--ease)}
.social svg{width:20px;height:20px;flex:none;transition:transform .45s var(--ease)}
.social:hover,.social:focus-visible{color:#fff;border-color:var(--brand);transform:translateY(-2px)}
.social:hover::before,.social:focus-visible::before{transform:translateY(0)}
.social:hover svg{transform:rotate(-10deg) scale(1.08)}
.social:active{transform:scale(.97)}
.social-instagram{--brand:#c13584}
.social-youtube{--brand:#d81f1f}
.social-facebook{--brand:#1b6ef3}
.social-tiktok{--brand:#111}
:root[data-theme="dark"] .social-tiktok{--brand:#2b2f3a}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .social-tiktok{--brand:#2b2f3a} }
@media (max-width:680px){ .socials-wrap{align-items:flex-start} .socials{justify-content:flex-start} .social{flex:1 1 calc(50% - 10px);justify-content:center} }